当前位置: 首页 > news >正文

js实现 throttle 和 debounce

1、throttle 节流:drag改变浏览器大小,触发onresize函数,实现拖动每过1秒输出一次,不足1秒,1秒后输出一次。多用于高频操作,如抢票、抢购等,无论点击多少次,只固定间隔执行一次,以减轻压力。

原理: 设置canRun作为是否执行的标志。每次触发onresize,都判断canRun的值(true执行,false不执行)。第一次应该执行,所以设置canRun初始值为true。当第一次执行后,设置canRunfalse(防止下次执行),并设置计时器,以恢复canRun的值。

	var canRun = true;window.onresize = function() {if (!canRun){return;}canRun = false;setTimeout(function() {console.log('节流了');canRun = true;}, 1000);}

        好,原理有了,接下来我们封装一个随处可用的函数,"window"只是为了理解。可以删掉:

	window.canRun = true;window.throttle = function(callback, time) {if (!window.canRun) {return;}window.canRun = false;setTimeout(function() {callback();window.canRun = true;}, time);}// 这样使用:window.onresize = function() {window.throttle(function() {console.log('防抖成功'); // 业务代码}, 1000);}

 

 

 

 

2、debounce防抖:drag改变浏览器大小,触发onresize函数,实现拖动停顿1秒输出。多用于输入框,当某一次输入后停顿满n秒才会去触发远程搜索。

        原理:timer作为定时器,每次触发onresize事件,都清一下定时器(之前未执行的drag方法就不会再执行),新的定时器在1秒后执行方法,那么如果下次drag1秒内,这次赋值的定时器又会被清掉(搜索方法不会执行),直到下次drag相对于这次drag间隔时间大于1秒(定时器可能没那么准)再执行一次方法onresize

	var timer = false;window.onresize = function() {console.log('1');clearTimeout(timer);timer = setTimeout(function() {console.log('防抖动');}, 1000);}

        同样,封装起来使用:

	timer = false;debounce = function(callback, time) {clearTimeout(timer);timer = setTimeout(callback, time);}onresize = function() {debounce(() => {console.log('不抖了');}, 1000);}

 


http://www.taodudu.cc/news/show-6309776.html

相关文章:

  • ‘underscore系列之throttle“‘
  • throttle在程序中的作用
  • debounce与throttle区别
  • 关于IO throttle
  • Python -- 限流 throttle
  • 函数的节流(throttle)
  • js 中 throttle 的实现
  • JavaScript 节流函数 throttle 详解
  • 节流(Throttle)与防抖(Debounce)区别与demo实现+ 图解
  • 网络分层,图,易懂--对应 应用层、数据传输层、网络层、数据链路层
  • 【图论基础】分层图
  • 数据分层(方法论)
  • 分层图[模板]
  • 食物链(分层图?)
  • 分层图总结(例题)
  • 拆点/分层图的使用
  • 分层架构简图
  • 数据分层简述
  • 简谈分层图
  • 数据流图-2(分层数据流图)
  • 流程图分级、分类、分层
  • 什么是分层架构
  • 链路聚合的原理以及配置
  • 链路聚合—3种模式
  • 链路聚合及配置
  • 交换机之间的链路聚合
  • 链路聚合与链路捆绑
  • 链路聚合和LACP
  • 链路聚合(二层链路聚合划分)
  • 链路聚合—3种模式 详细