function debounce(func, wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

function debounce(func, wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
    if (callNow) func.apply(context, args);
  };
}

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果

function throttle(func, wait) {
  let previous = 0;
  return function () {
    let now = Date.now();
    let context = this;
    let args = arguments;
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now;
    }
  };
}

当高频事件触发时，第一次会立即执行（给 scroll 事件绑定函数与真正触发事件的间隔一般大于 delay，如果你非要在网页加载 1000 毫秒以内就去滚动网页的话，我也没办法 o (╥﹏╥) o），而后再怎么频繁地触发事件，也都是每 delay 时间才执行一次。而当最后一次事件触发完毕后，事件也不会再被执行了 （最后一次触发事件与倒数第二次触发事件的间隔小于 delay，为什么小于呢？因为大于就不叫高频了呀 (╹▽╹)）。

function throttle(func, wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args);
      }, wait);
    }
  };
}

当触发事件的时候，我们设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行，直到 delay 时间后，定时器执行执行函数，并且清空定时器，这样就可以设置下个定时器。当第一次触发事件时，不会立即执行函数，而是在 delay 秒后才执行。而后再怎么频繁触发事件，也都是每 delay 时间才执行一次。当最后一次停止触发后，由于定时器的 delay 延迟，可能还会执行一次函数。
节流中用时间戳或定时器都是可以的。更精确地，可以用时间戳 + 定时器，当第一次触发事件时马上执行事件处理函数，最后一次触发事件后也还会执行一次事件处理函数。

// 节流throttle代码（时间戳+定时器）：
var throttle = function (func, delay) {
  var timer = null;
  var startTime = Date.now();
  return function () {
    var curTime = Date.now();
    var remaining = delay - (curTime - startTime);
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    if (remaining <= 0) {
      func.apply(context, args);
      startTime = Date.now();
    } else {
      timer = setTimeout(func, remaining);
    }
  };
};

在节流函数内部使用开始时间 startTime、当前时间 curTime 与 delay 来计算剩余时间 remaining，当 remaining<=0 时表示该执行事件处理函数了（保证了第一次触发事件就能立即执行事件处理函数和每隔 delay 时间执行一次事件处理函数）。如果还没到时间的话就设定在 remaining 时间后再触发 （保证了最后一次触发事件后还能再执行一次事件处理函数）。当然在 remaining 这段时间中如果又一次触发事件，那么会取消当前的计时器，并重新计算一个 remaining 来判断当前状态。

将几次操作合并为一此操作进行。原理是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

input 框搜索，用户在不断输入值时，用防抖来节约请求资源。

window 触发 resize 的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

鼠标不断点击触发，mousedown (单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用 throttle 来判断

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。