函数节流throttle与去抖动debounce

[incuisting]

以下使用场景，会频繁的触发事件，或者操作DOM，资源加载等行为。导致浏览器资源占用过大，卡顿或者崩溃。

1. window对象的resize、scroll事件
2. 拖拽时的mousemove事件
3. 射击游戏中的mousedown、keydown事件
4. 文字输入、自动完成的keyup事件

根据实际使用的需要，出现了throttle与debounce这两种方法来防止重复触发。

区别

debounce是把多次顺序的调用合并成一次。
throttle则是把多次顺序的调用按照预先设定好的事件间隔去过滤后再执行，举一个例子throttle就是机关枪的扳机，你不放扳机，它就一直匀速扫射

debounce的简单实现

/**
* 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 delay，action 才会执行
* @param delay {number}    空闲时间，单位毫秒
* @param action {function}  请求关联函数，实际应用需要调用的函数
* @return {function}    返回客户调用函数
*/

var debounce = function(delay, action ) {
  var inDebounce = undefined;
  return function() {
    var context = this,
      args = arguments;
    clearTimeout(inDebounce);
    return inDebounce = setTimeout(function() {
      return action.apply(context, args);
    }, delay);
  }
}

throttle的简单实现

/**
* 频率控制 返回函数连续调用时，func执行频率限定为 次 / limit
* @param limit{number}    延迟时间，单位毫秒
* @param func{function}  请求关联函数，实际应用需要调用的函数
* @return {function}    返回客户调用函数
*/
var throttle = function(func, limit) {
  var inThrottle,
    lastFunc,
    lastRan;
  return function() {
    var context = this,
      args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      lastRan = Date.now()
      inThrottle = true;
    } else {
      clearTimeout(lastFunc)
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args)
          lastRan = Date.now()
        }
      }, limit - (Date.now() - lastRan))
    }
  };
};

不过还是建议使用lodash里的debounce和throttle

参考文章