什么是防抖和节流？如何实现？

在前端开发中，处理高频触发的事件（如滚动、输入、窗口调整）是一项常见挑战。如果不加控制，这些事件绑定的回调函数会以极高的频率执行，可能导致严重的性能问题。防抖和节流是两种控制函数执行频率的经典技术，它们目的相似但策略不同，适用于不同的交互场景。

防抖的核心概念

防抖的基本思想是：在事件被高频触发时，函数不会立即执行。只有当事件停止触发并经过一段指定的静默时间后，函数才会被执行一次。如果在这段静默时间内事件再次被触发，则重新开始计时。这就像电梯门，只有在一段时间内没有人进出时，才会关门。

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

window.addEventListener('resize', debounce(() => {
  console.log('窗口大小调整');
}, 300));

上述实现中，resize事件的回调会被延迟，直到用户停止调整窗口超过300毫秒后才真正执行。这常用于搜索框输入建议，避免在用户连续输入每个字符时都发起请求。

节流的执行策略

与防抖不同，节流确保一个函数在指定的时间间隔内最多只执行一次。它像水龙头一样，有规律地滴水，无论触发多快，都保持固定的执行频率。

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(() => {
  console.log('滚动事件');
}, 200));

这个实现保证了无论滚动多快，日志最多每200毫秒打印一次。节流适用于持续触发但需要定期反馈的场景，如滚动加载更多内容或游戏中的按键处理。

两种技术的选择与应用

选择防抖还是节流，取决于业务逻辑。如果你关心的是事件触发的最终状态，例如输入结束后才进行验证或搜索，使用防抖。如果你需要在事件持续触发过程中维持一个可接受的执行频率，例如滚动时更新元素位置，使用节流。

一个简单的对比示例能清晰展示区别：

const log = () => console.log('触发');
const debouncedLog = debounce(log, 500);
const throttledLog = throttle(log, 500);

// 快速连续触发5次
// 防抖：只会在停止触发500ms后打印一次。
// 节流：在第一次触发时立即打印，之后每500ms最多打印一次。

理解并合理运用这两种技术，能显著提升高交互性应用的性能和用户体验。