JavaScript防抖与节流有哪些最佳实践 - 问答

在 JavaScript 中，防抖（debounce）和节流（throttle）是两种常用的优化高频率触发事件的技术。它们都可以提高性能，但应用场景和实现方式有所不同。以下是一些关于防抖和节流的最佳实践：

防抖（Debounce）

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

最佳实践：

使用闭包来保持函数状态。
在防抖函数内部，先执行一次目标函数，然后设置一个定时器，在定时器回调中执行目标函数。
如果在这段间隔时间内，事件再次被触发，则重新设置定时器。
当不再触发事件时，定时器会完成执行，目标函数最终会被调用。

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

节流（Throttle）

节流的核心思想是在一段固定的时间内，只执行一次目标函数。适用于如滚动加载、鼠标移动等场景。

最佳实践：

使用闭包来保持函数状态。
在节流函数内部，先执行一次目标函数，然后设置一个定时器，在定时器回调中执行目标函数。
如果在这段间隔时间内，事件再次被触发，则不做任何操作，等待下一个时间间隔。
当定时器完成执行后，目标函数会被调用。

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

结合使用

在某些场景下，可以将防抖和节流结合使用，以达到更好的性能优化效果。例如，在滚动加载时，可以使用节流来控制触发频率，而在输入框实时搜索时，可以使用防抖来确保只在用户停止输入一段时间后才执行搜索操作。

注意事项

在选择防抖还是节流时，要根据具体场景和需求来判断。
在实现防抖和节流时，要注意避免引入额外的性能开销，如过多的闭包和定时器。
在处理异步操作时，要确保防抖和节流函数能够正确处理返回值和错误。

0 赞

0 踩