防抖和节流

防抖（Debounce）和节流（Throttle）是两种常用的优化前端性能的技术，用于控制事件触发频率，避免过多的事件触发导致性能问题。

防抖

事件触发之后等待一定时间再执行，如果这个时间内该事件又被触发了则重新计时。

function debounce(func, delay) {
  let timer;

  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

适用场景：

• 输入框搜索建议：用户在输入时，只有在停止输入一段时间后才触发搜索请求。；
• 窗口大小调整：窗口大小调整时，只在停止调整一段时间后触发重新计算布局。

节流

一定时间间隔内，无论事件触发多少次，只会执行一次。事件只会按照一定时间间隔一次一次执行。

function throttle(func, delay) {
  let isRun = true;
  return function () {
    if (!isRun) return;
    isRun = false;
    setTimeout(() => {
      func.apply(this, arguments);
      isRun = true;
    }, delay);
  };
}

setTimeout 不精准，详情见 setTimeout 一章。

适用场景：

• 滚动加载：滚动页面时，只在一定时间间隔内加载更多内容，避免频繁加载。
• 防止按钮重复点击：按钮点击后在一定时间内禁用，防止用户多次点击。