函数节流（throttle）与函数去抖（debounce）的区别

发表于   |   分类于   |  

以前在做一些性能小优化的时候会用到 “debounce” 这种技巧，特别是在处理一些 DOM 事件上。今天了解到原来还有一个跟它类似的叫 “throttle” 的玩意，一开始看上去感觉没多大的差别，仔细阅读代码，发现它们无论是在代码逻辑和应用场景上都是有很大的区别的。

函数节流（throttle）是什么

函数节流（throttle）用来限制单位时间的函数被调用的最大次数

比方说下面这段代码中的 fn() 每 100ms 只能执行一次，那么 1s 内它最多只能执行10次：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var throttle = function(action, delay){
  var last = 0;
  return function(){
    var curr = +new Date();
    if (curr - last > delay)
      action.apply(this, arguments);
    last = curr;
  };
};

func () {
  // ...
}

var fn = throttle(func, 100);

函数去抖（debounce）是什么

函数去抖（debounce）规定了函数在指定的时间内不能被再次调用，如果在这期间被调用了，那么执行等待时间将会被刷新

比方说下面这段代码中的 fn() 被调用后，要等待 100ms 函数 func 才会被执行，如果在这期间， fn() 又被调用了，那么等待时间将从调用的那一刻重新算起。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var debounce = function(action, idle){
  var last;
  return function(){
    var ctx = this, args = arguments;
    clearTimeout(last);
    last = setTimeout(function(){
        action.apply(ctx, args);
    }, idle);
  };
};

func () {
  // ...
}

var fn = debounce(func, 100);

Demo

借用一个第三方示例：

参考资料：