什么是防抖（debounce）和节流（throttle）？如何实现？

推荐答案

防抖（Debounce）

防抖是指在一定时间内，无论触发多少次事件，只执行最后一次操作。常用于输入框实时搜索、窗口大小调整等场景。

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

节流（Throttle）

节流是指在一定时间内，无论触发多少次事件，只执行一次操作。常用于滚动事件、鼠标移动等场景。

// www.javascriptcn.com code example
function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

本题详细解读

防抖（Debounce）

防抖的核心思想是：在事件被触发后，等待一段时间再执行操作。如果在等待时间内再次触发事件，则重新计时。这样可以避免频繁触发事件导致的性能问题。

应用场景

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

节流（Throttle）

节流的核心思想是：在一定时间内，无论事件触发多少次，只执行一次操作。这样可以确保事件处理函数不会过于频繁地执行。

应用场景

• 滚动事件：在滚动过程中，每隔一段时间才执行一次操作。
• 鼠标移动：在鼠标移动过程中，每隔一段时间才执行一次操作。

实现细节

• 防抖：通过setTimeout和clearTimeout来控制函数的执行时机。
• 节流：通过记录上一次执行的时间戳，来判断是否达到执行条件。

总结

防抖和节流都是优化高频事件处理的有效手段，选择合适的策略可以显著提升前端性能。