函数防抖和倾斜

函数防抖和函数分流的思想都是通过定时器控制函数的执行频率

函数防抖:指的是多次触发事件后,事件处理函数只执行一次,而且是在事件触发操作停止的时候

具体的思路就是延迟处理函数,如果设定的时间到来之前,又一次触发了事件,就清除上一次的定时器(你尽管触发事件,但是我一定在事件触发n秒后才执行,如果你在一个事件触发的n秒内又触发了这个事件,那我就以新的事件的时间为准,n秒后才执行,总之,就是要等你触发完事件n秒内不再触发事件,我才执行)

((适合多次事件一次响应的情况)

这里涉及到了保存timer的技巧,总共有两个方法。

  1. 设置为某个全局变量的属性,例如绑定到某个全局函数上,问题是如果传入了method是个匿名函数,绑定的timer就找不到了,所以这个方法有bug。
  2. 闭包 闭包的经典应用就是保留变量,下面是代码实现。

(如果想让一个函数执行完后,函数内的某个变量(timer)仍旧保留,就可以使用闭包 把要保存的变量在父作用域声明,其他的语句放到子作用域里,并且作为一个function返回 所以闭包可以理解为分离变量)

function debounce(method,delay) { var timer=null; return function () { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function () { method.apply(context,args); },delay); } }

函数分流:函数分流的思想就是计时,上面的代码是只有在操作结束后才执行,只需要在上面的代码上加一个计时判断,如果超过了设定的时间,就执行一次处理函数,就达到了分流的效果。

(适合大量事件按时间做平均分配触发)

  • 函数防抖

该函数接收三个参数,分别为要执行的函数,隔多长时间清除函数定时器以及多长时间需要执行一次。 函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。在等待时间内触发此函数,则重新计算等待时间。

var debounce  = function(fn,delay,mustRunDelay){ var timer = null; var t_start; return function(){ var context = this; var args = arguments; var t_curr = +new Date(); clearTimeout(timer); if(!t_start){ t_start = t_curr; } if(t_curr - t_start >= mustRunDelay) { fn.apply(context,args); t_start = t_curr } else { timer = setTimeout(function(){ fn.apply(context,args); },delay); } } }

  • 函数节流

函数分流的思想就是计时,上面的代码是只有在操作结束后才执行,只需要在上面的代码上加一个计时判断,如果超过了设定的时间,就执行一次处理函数,就达到了分流的效果。

function throttle(method, delay, mustRunDelay) { var timer = null, args = arguments; var start = 0, now = 0; return function () { var context = this; now= Date.now(); if(!start){ start = now; } if(now - start >= mustRunDelay){ method.apply(context, args); start = Date.now(); }else { clearTimeout(timer); timer = setTimeout(function () { method.apply(context, args); }, delay); } } } obj.onmousemove = throttle(myFun, 50, 500);

 

 

函数节流:是确保函数特定的时间内至多执行一次。

函数防抖:是函数在特定的时间内不被再调用后执行

执行环境:

函数节流(throttle)(适合多次事件一次响应的情况)

1. 频繁的mousemove/keydown,比如高频的鼠标移动,游戏射击类的

2. 搜索联想(keyup)

3. 进度条(我们可能不需要高频的更新进度)

4. 拖拽的dragover等

5. 给按钮加函数防抖防止表单多次提交。

6. 对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。

7. 判断scroll是否滑到底部,滚动事件+函数防抖

 

函数防抖(debounce)(适合大量事件按时间做平均分配触发。)

 1. scroll/resize事件

 2. 文本连续输入,ajax验证/关键字搜索

3. 游戏中的刷新率

4. DOM元素拖拽

5. Canvas画笔功能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值