防抖

2017-12-07

基础版

防抖原理：触发事件后 n 秒内不再触发事件才会执行

var container = document.getElementById('container');
function active() {
  // 执行代码
}
function debounce(callback, wait) {
  var timeout;
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(callback, wait);
  }
}
// 调用
container.onmousemove = debounce(active, 1000);

增强版

有两个问题：
1.this 的指向问题。直接调用 active 函数时 container.onmousemove = active，this 指向调用者 container；当使用 debounce 时，this 会指向 window
2.在事件处理函数中会提供事件对象 event，但是现在调用时并没有将事件对象 event 传递下去
解决方法：使用 call、apply 修改 this 指向，并同时传递 event 对象

function debounce(callback, wait) {
  var timeout;
  return function () {
    var context = this;
    var args = arguments;
    clearTimeout(timeout)
    timeout = setTimeout(function () {
      callback.apply(context, args)
    }, wait);
  }
}

定制版

需求1：事件触发后立刻执行回调函数，等待 n 秒后才可以再次触发，同时要注意立刻执行回调函数可能会有返回值
方案：添加一个控制是否立刻执行的参数，然后判断是否立刻执行，如果是就以 setTimeout 返回的 ID 值来控制流程

function debounce(callback, wait, immediate) {
  var timeout, result;
  return function () {
    var context = this;
    var args = arguments;
    if (timeout) {
      clearTimeout(timeout);
    }
    if (immediate) {
      var perform = !timeout;
      timeout = setTimeout(function () {
        timeout = null;
      }, wait);
      if (perform) {
        result = callback.apply(context, args);
      }
    } else {
      timeout = setTimeout(function () {
        callback.apply(context, args)
      }, wait);
    }
    // 如果不是立刻执行，返回值永远是undefined
    return result;
  }
}
// 调用获取返回值
var result = debounce(active, 1000, true)();

需求2：可以取消 debounce 函数，不用等待就可以再次触发事件
方案：添加一个取消的 cancel 方法，调用该方法时清除 setTimeout 返回的 ID 值，此时再触发事件就会立刻执行回调函数

function debounce(callback, wait, immediate) {
  var timeout, result;
  var debounced = function () {
    var context = this;
    var args = arguments;
    if (timeout) {
      clearTimeout(timeout);
    }
    if (immediate) {
      var perform = !timeout;
      timeout = setTimeout(function () {
        timeout = null;
      }, wait)
      if (perform) {
        result = callback.apply(context, args);
      }
    } else {
      timeout = setTimeout(function () {
        callback.apply(context, args)
      }, wait);
    }
    return result;
  };
  debounced.cancel = function () {
    clearTimeout(timeout);
    timeout = null;
  };
  return debounced;
}
// 调用
var debounceActive = debounce(active, 10000, true);
container.onmousemove = debounceActive;
// 执行cancel方法即可取消debounce函数
// debounceActive.cancel();