JavaScript防抖与节流如何提高响应速度

在 JavaScript 中，防抖（debounce）和节流（throttle）是两种常用的优化高频率触发事件的技术。它们都能提高响应速度，但实现方式和应用场景略有不同。

防抖（debounce）：

防抖的核心思想是在一定时间内，事件被连续触发时，只执行最后一次触发的事件处理函数。适用于如输入框实时搜索、窗口大小调整等场景。

实现方式：

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

节流（throttle）：

节流的核心思想是在一定时间内，事件被连续触发时，只执行一次事件处理函数。适用于如滚动加载、鼠标移动等场景。

实现方式：

function throttle(func, wait) {
  let lastTime = 0;
  return function () {
    const context = this;
    const args = arguments;
    const nowTime = Date.now();
    if (nowTime - lastTime > wait) {
      func.apply(context, args);
      lastTime = nowTime;
    }
  };
}

如何提高响应速度：

1. 减少事件处理函数的执行时间：通过优化代码逻辑、减少不必要的计算，提高事件处理函数的执行效率。

2. 使用防抖或节流技术：在高频率触发事件的情况下，使用防抖或节流技术可以减少事件处理函数的执行次数，从而提高响应速度。

3. 避免不必要的 DOM 操作：在处理与 DOM 相关的事件时，尽量减少不必要的 DOM 操作，例如避免频繁的样式修改、元素增删等。

4. 使用 requestAnimationFrame：在进行动画或需要实时更新的场景中，使用 requestAnimationFrame 可以让浏览器在下一次重绘之前执行指定的回调函数，从而提高渲染性能。