防抖节流原理，区别及应用，并用JavaScript进行实现（-节流篇）

节流

• 原理：规定在一个单时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
• 适用场景：
  。拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
  。缩放场景：监控浏览器resize
• 使用时间戳实现
  。使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳（最开始设置为0）如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

function throttle(func, wait) {
  let context, args;
  let previous = 0;

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

• 使用定时器实现
  。当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下一个定时器。

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

  }
}