函数节流（throttle）与函数去抖（debounce）

标签：

throttle 控制函数按照特定的频率执行
debounce 控制函数在特定的时间间隔后再执行

使用场景

throttle

1.拖曳时的mousemove事件
2.射击游戏中的mousedown，keydown事件
3.window的scroll时更新样式，如随动效果

简单实现
var throttle = function(delay, action){
var last = 0;
   return function(){
       var curr = +new Date();
       if (curr - last > delay){
             action.apply(this, arguments);
             last = curr;
        }
};
};

debounce

1. 文字输入(keyup)的自动完成，实时校验
2. window的resize重新计算样式或布局

简单实现
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和debounce的实现

相关js库 underscore.js,lodash.js,jquery-throttle-debounce.js等均有其实现。

 参考：http://www.cnblogs.com/fsjohnhuang/p/4147810.html

函数节流（throttle）与函数去抖（debounce）

标签：

原文地址：http://www.cnblogs.com/mengff/p/4993349.html