JS debounce和throttle 去抖和节流

Posted 弗朗西斯科

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS debounce和throttle 去抖和节流相关的知识,希望对你有一定的参考价值。

JS中的高频事件有scroll recize mouseover。 如果频繁触发事件绑定函数,会导致浏览器性能上的损失。

因此我们通常会添加延迟执行的逻辑。

 

在underscore.js里面有debounce和throttle这两个方法。

throttle创建并返回一个节流阀一样的函数,当重复调用函数的时候,至少每隔wait毫秒调用一次该函数

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

  

debounce函数,去抖,是讲延迟函数的执行在函数最后一次调用的wait毫秒之后,比如当窗口停止改变大小之后重新计算布局。

可以这样理解,像弹簧一样,只有你松开压住弹簧的手,弹簧才会向上弹起。

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

技术分享
1 var lazyLayout = _.debounce(calculateLayout, 300);
2 $(window).resize(lazyLayout);
View Code
//简单实现一个debonce
var debonce = function(fn,idle){ var last = null; return function() { var ctx = this, args = arguments; clearTimeout(last); last = setTimeout(function(){ fn.apply(ctx,args); },idle) } }

  


以上是关于JS debounce和throttle 去抖和节流的主要内容,如果未能解决你的问题,请参考以下文章

js去抖和节流函数详解

节流(Throttling)和去抖(Debouncing)详解

javascript函数节流(throttle)与函数去抖(debounce)

js 函数的防抖(debounce)与节流(throttle)

函数节流(throttle)与函数去抖(debounce)

防抖(debounce)和节流(throttle)