Debounce&&Throttle 布满荆棘的人生 2022-06-02 06:45 136阅读 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][] ### 也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。 简单实现: var throttle = function(delay, action){ var last = 0; return function(){ var curr = +new Date(); if(curr - last > delay){ action.apply(this, arguments); last = curr; } } } 参考: \- [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
还没有评论,来说两句吧...