防抖节流

1.防抖（Debounce）

原理：事件触发后，等待固定时间（如 n毫秒），若期间无新触发，则执行函数；若期间再次触发，则重置计时器，重新等待

目标：确保连续操作中只执行最后一次触发

比喻：电梯等待乘客，关门倒计时15秒内若有新乘客进入，则重新倒计时，直到无人进入才运行

2.节流（Throttle）

原理：事件触发后立即执行函数，随后进入冷却期（如 n毫秒），冷却期内新触发被忽略。冷却期结束后再次触发才能执行。

目标：固定时间间隔内只执行一次操作。

比喻：电梯每15秒准时运行一次，期间无论多少人进入都无视，到点即走

防抖实现

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

// 示例：输入框实时搜索
input.addEventListener("input", debounce(search, 500));

节流实现

  // 时间戳实现
  function throttle(fn, interval) {
      let lastTime = 0;
      return function (...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
          fn.apply(this, args); // 执行函数
          lastTime = now;      // 更新最后执行时间
        }
      };
    }
    // 示例：滚动加载更多
    window.addEventListener("scroll", throttle(checkScrollPosition, 300));

  // 定时器实现
  function throttle(func, delay) {
      let timer = null; // 标记定时器状态
      return function (...args) {
        if (!timer) { // 若定时器未激活
          timer = setTimeout(() => {
            func.apply(this, args); // 延迟执行目标函数
            timer = null; // 重置定时器状态
          }, delay);
        }
      };
    }
    // 应用：监听窗口调整事件
    window.addEventListener("resize", throttle(handleResize, 300));

参考：一眼就能看懂的防抖和节流动画(还能学一点canvas)图: 一条竖线代表一次函数调用，函数防抖是间隔超过一定时间后才会执 - 掘金