节流 & 防抖

防抖

• 触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间
• 执行触发的最后一次

function debounce(fn) {
  let timeout = null;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, 500);
  };
}

节流

• 高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率
• 执行触发的第一次

function throttle(fn) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      // 最后在执行完毕后再把标记设置为 true表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false，在开头被return 掉
      canRun = true;
    }, 500);
  };
}