防抖与节流

一、是什么

• 防抖（debounce）：停止触发后执行一次
• 节流（throttle）：固定时间执行一次

二、为什么

优化性能：

• 输入框搜索
• 滚动监听
• resize

三、实现

防抖

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

节流

function throttle(fn, delay) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last > delay) {
      fn(...args);
      last = now;
    }
  };
}

四、总结

• 防抖：最后一次执行
• 节流：按频率执行