Debounce&&Throttle

布满荆棘的人生 2022-06-02 06:45 120阅读 0赞

防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。

实际上对于window的resize事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法

*  debounce：把触发非常频繁的事件（比如按键）合并成一次执行。
 *  throttle：保证每 X 毫秒恒定的执行次数，比如每200ms检查下滚动位置，并触发 CSS 动画。
 *  requestAnimationFrame：可替代 throttle ，函数需要重新计算和渲染屏幕上的元素时，想保证动画或变化的平滑性，可以用它。注意：IE9 不支持。

--------------------

### [Debounce][] ###

也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

简单实现：

var debounce = function(idle, action){ 
      var last
      return function(){ 
        var ctx = this, args = arguments
        clearTimeout(last)
        last = setTimeout(function(){ 
            action.apply(ctx, args)
        }, idle)
      }
    }

### [Throttle][] ###

也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

简单实现：

参考：  
\- [https://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/][https_jinlong.github.io_2016_04_24_Debouncing-and-Throttling-Explained-Through-Examples]  
\- [https://www.cnblogs.com/fsjohnhuang/p/4147810.html][https_www.cnblogs.com_fsjohnhuang_p_4147810.html]

[Debounce]: https://codepen.io/GitKou/pen/dZoBMO
[Throttle]: https://codepen.io/GitKou/pen/MrOmvG
[https_jinlong.github.io_2016_04_24_Debouncing-and-Throttling-Explained-Through-Examples]: https://jinlong.github.io/2016/04/24/Debouncing-and-Throttling-Explained-Through-Examples/
[https_www.cnblogs.com_fsjohnhuang_p_4147810.html]: https://www.cnblogs.com/fsjohnhuang/p/4147810.html

Debounce&&Throttle

发表评论取消回复

还没有评论，来说两句吧...

相关阅读