节流函数

创建一个节流函数，每隔 wait 毫秒最多调用一次提供的函数。

• 使用 setTimeout() 和 clearTimeout() 来节流给定的方法 fn。
• 使用 Function.prototype.apply() 将 this 上下文应用于函数，并提供必要的参数。
• 使用 Date.now() 来跟踪上次调用节流函数的时间。
• 使用变量 inThrottle 来防止 fn 的第一次执行和下一次循环之间的竞争条件。
• 省略第二个参数 wait，将超时设置为默认值 0 毫秒。

const throttle = (fn, wait) => {
  let inThrottle, lastFn, lastTime;
  return function() {
    const context = this,
      args = arguments;
    if (!inThrottle) {
      fn.apply(context, args);
      lastTime = Date.now();
      inThrottle = true;
    } else {
      clearTimeout(lastFn);
      lastFn = setTimeout(function() {
        if (Date.now() - lastTime >= wait) {
          fn.apply(context, args);
          lastTime = Date.now();
        }
      }, Math.max(wait - (Date.now() - lastTime), 0));
    }
  };
};

window.addEventListener(
  'resize',
  throttle(function(evt) {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); // 最多每 250 毫秒记录一次窗口尺寸