防抖与节流

针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。

因此针对这类事件要进行防抖动或者节流处理

何为防抖?

作用是在短时间内多次触发同一个函数,只执行最后一次,或者只在开始时执行。

 

以用户拖拽改变窗口大小,触发 resize 事件为例,在这过程中窗口的大小一直在改变,所以如果我们在 resize 事件中绑定函数,这个函数将会一直触发,而这种情况大多数情况下是无意义的,还会造成资源的大量浪费。

话不多说上代码:

执行效果如下:

也就是用户只要一直拖拽改变窗口大小,都会不断的触发fn函数,为了让你们看得更形象一些我找了一张图:

没有经过防抖处理效果大概就是这样的,不进行防抖处理 迟早脖子扭断,所以我们需要写一个防抖函数来处理一下

处理后的效果:

在 debounce 中包装我们的函数,过 2 秒触发一次

  • 在 resize 事件上绑定处理函数,这时 debounce 函数会立即调用,实际上绑定的函数时 debounce 函数内部返回的函数。

  • 每一次事件被触发,都会清除当前的 timer 然后重新设置超时调用。 
    这就会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发

  • 只有当高频事件停止,最后一次事件触发的超时调用才能在delay时间后执行

     

更进一步,我们不希望非要等到事件停止触发后才执行,我希望立刻执行函数,然后等到停止触发 n 秒后,才可以重新触发执行。 
这里增加一个immediate参数来设置是否要立即执行:

 

何为节流?

节流函数允许一个函数在规定的时间内只执行一次。

它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。

应用场景如:输入框的实时查询,可以限定用户在输入时,只在每两秒钟响应一次查询。

主要有两种实现方法:

  • 时间戳

  • 定时器

    间戳实现:

防抖与节流_第1张图片

 

 

当高频事件触发时,第一次应该会立即执行(给事件绑定函数与真正触发事件的间隔如果大于delay的话),而后再怎么频繁触发事件,也都是会每delay秒才执行一次。而当最后一次事件触发完毕后,事件也不会再被执行了。

 

定时器实现: 
当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行;直到delay秒后,定时器执行执行函数,清空定时器,这样就可以设置下个定时器。

防抖与节流_第2张图片

 

 

当第一次触发事件时,肯定不会立即执行函数,而是在delay秒后才执行。 
之后连续不断触发事件,也会每delay秒执行一次。 
当最后一次停止触发后,由于定时器的delay延迟,可能还会执行一次函数。

 

可以综合使用时间戳与定时器,完成一个事件触发时立即执行,触发完毕还能执行一次的节流函数:

防抖与节流_第3张图片

 

你可能感兴趣的:(防抖与节流)