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;
    }
  };
}