节流防抖的简单实现

• 「节流throttle」，规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

• 「防抖debounce」,在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

节流的简单实现

function throttle(fn, time) {
  var lock = false;
  return function() {
    if (lock) return;
    lock = true;
    try {
      fn.apply(this, arguments); // 需要注意this和参数需要带上
    } catch(err) {} finally {
      setTimeout(function() { // 为了防止方法执行有错误导致节流锁死，用finally保证锁不被锁死
        lock = false;
      }, time);
    }
  };
}

防抖的简单实现

function debounce(fn, time) {
  var timeoutKey;
  return function() {
    if (timeoutKey) {
      clearTimeout(timeoutKey);
    }
    var _this = this;
    var args = arguments;
    timeoutKey = setTimeout(function() {
      timeoutKey = undefined;
      fn.apply(_this, args);
    }, time);
  }
}