javascript函数的throttle和debounce

上周写了window resize和scroll事件的基本优化,结果微博上交流的人还挺多,大家都提到了一个技术名词:“throttle”。

throttle

我们这里说的throttle就是函数节流的意思。再说的通俗一点就是函数调用的频度控制器,是连续执行时间间隔控制。主要应用的场景比如:

  • 鼠标移动,mousemove 事件
  • DOM 元素动态定位,window对象的resize和scroll 事件

有人形象的把上面说的事件形象的比喻成机关枪的扫射,throttle就是机关枪的扳机,你不放扳机,它就一直扫射。我们开发时用的上面这些事件也是一样,你不松开鼠标,它的事件就一直触发。回到window resize和scroll事件的基本优化提到的优化:

var resizeTimer=null;
$(window).on('resize',function(){
       if(resizeTimer){
           clearTimeout(resizeTimer)
       }
       resizeTimer=setTimeout(function(){
           console.log("window resize");
       },400);
   }
);

setTimeout和clearTimeout其实就是一个简单的 throttle,很多好的控制了resize事件的调用频度。

debounce

debounce和throttle很像,debounce是空闲时间必须大于或等于 一定值的时候,才会执行调用方法。debounce是空闲时间的间隔控制。比如我们做autocomplete,这时需要我们很好的控制输入文字时调用方法时间间隔。一般时第一个输入的字符马上开始调用,根据一定的时间间隔重复调用执行的方法。对于变态的输入,比如按住某一个建不放的时候特别有用。

debounce主要应用的场景比如:

  • 文本输入keydown 事件,keyup 事件,例如做autocomplete

这类网上的方法有很多,比如Underscore.js就对throttle和debounce进行封装。jQuery也有一个throttle和debounce的插件:jQuery throttle / debounce,所有的原理时一样的,实现的也是同样的功能。再奉上一个自己一直再用的throttle和debounce控制函数:

/*
* 频率控制 返回函数连续调用时,fn 执行频率限定为每多少时间执行一次
* @param fn {function}  需要调用的函数
* @param delay  {number}    延迟时间,单位毫秒
* @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行。
* @return {function}实际调用函数
*/
var throttle = function (fn,delay, immediate, debounce) {
   var curr = +new Date(),//当前事件
       last_call = 0,
       last_exec = 0,
       timer = null,
       diff, //时间差
       context,//上下文
       args,
       exec = function () {
           last_exec = curr;
           fn.apply(context, args);
       };
   return function () {
       curr= +new Date();
       context = this,
       args = arguments,
       diff = curr - (debounce ? last_call : last_exec) - delay;
       clearTimeout(timer);
       if (debounce) {
           if (immediate) {
               timer = setTimeout(exec, delay);
           } else if (diff >= 0) {
               exec();
           }
       } else {
           if (diff >= 0) {
               exec();
           } else if (immediate) {
               timer = setTimeout(exec, -diff);
           }
       }
       last_call = curr;
   }
};

/*
* 空闲控制 返回函数连续调用时,空闲时间必须大于或等于 delay,fn 才会执行
* @param fn {function}  要调用的函数
* @param delay   {number}    空闲时间
* @param immediate  {bool} 给 immediate参数传递false 绑定的函数先执行,而不是delay后后执行。
* @return {function}实际调用函数
*/

var debounce = function (fn, delay, immediate) {
   return throttle(fn, delay, immediate, true);
};

demo:https://www.html.cn/demo/throttle_debounce/

更多阅读:

http://www.alloyteam.com/2012/11/javascript-throttle/

http://remysharp.com/2010/07/21/throttling-function-calls/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » javascript函数的throttle和debounce

评论 11

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    demo页面未找到. 终于把老文补回来了.不容易啊.

    huugle5年前 (2014-04-09)回复
    • 哎,是啊,demo页找不到了

      5年前 (2014-04-09)回复
  2. #-48

    提个意见,这个js的样式很不容易看清,建议换个样式

    李璇4年前 (2014-09-18)回复
  3. #-47

    @李璇 已经修改,谢谢反馈

    4年前 (2014-09-18)回复
  4. #-46

    这2个函数的意思,你文章正好搞反了吧. debounc,正好使用 resized
    var lazyLayout = _.debounce(calculateLayout, 300);
    $(window).resize(lazyLayout);
    underscore的英文文档的解释给你正好相反。

    Lyle2年前 (2017-01-12)回复
  5. #-45

    给 immediate参数传递false 绑定的函数先执行????
    immediate 是立即的意思 难道不是传true才立即执行 否则等待执行???
    无法理解

    chuckie2年前 (2017-01-17)回复
  6. #-44

    两个概念弄反了

    ming2年前 (2017-03-06)回复
  7. #-43

    弄反了?

    086251f08dec380b85afc6044b326e7b1年前 (2017-10-11)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏