JavaScript 防抖debounce与节流thorttle

JavaScript 防抖 debounce 与节流 throttle

在 JavaScript 中，由于一些操作会频繁触发，如缩放、滚动等，可能会造成一些性能上的问题。而防抖和节流是一些用于解决这类问题的优化手段。

防抖 debounce

所谓防抖，就是指一个函数在一定时间内无论被触发多少次，都只会执行一次。这里的时间指的就是防抖的延迟时间，只有当该时间结束后，函数才会被执行一次。

下面是一段防抖的示例代码：

/**
 * 防抖函数
 * @param {Function} func 需要执行的函数
 * @param {number} delay 延迟执行的时间（单位：毫秒）
 * @returns {Function} 返回防抖处理后的函数
 */
function debounce(func, delay) {
  let timer = null;

  return function() {
    const context = this;
    const args = arguments;

    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  }
}

/**
 * 使用示例
 */
function doSomething() {
  console.log('do something');
}

const debouncedDoSomething = debounce(doSomething, 1000);

window.addEventListener('scroll', debouncedDoSomething);

这段代码中，我们定义了一个 debounce 函数，它将需要执行的函数和延迟执行的时间作为参数。在函数内部，我们创建了一个 timer 变量，用于存放 setTimeout 返回的定时器 ID。在执行函数时，我们首先保存当前执行上下文和参数，如果 timer 已存在，则清除它。然后使用 setTimeout 创建一个定时器，在指定的延迟时间后执行函数。

在使用时，我们可以将需要执行的函数和防抖延迟时间作为参数传入 debounce 函数，得到一个新的防抖处理过的函数。在这里，我们给 window 对象的 scroll 事件监听函数传入了这个新的防抖函数，以实现防抖的效果。

节流 throttle

与防抖不同，节流是指一个函数在一定时间内最多只能执行一次。这里的时间指的是节流的间隔时间，只有当该时间过去后，函数才会被执行。

下面是一段节流的示例代码：

/**
 * 节流函数
 * @param {Function} func 需要执行的函数
 * @param {number} interval 最小间隔时间（单位：毫秒）
 * @returns {Function} 返回节流处理后的函数
 */
function throttle(func, interval) {
  let timer = null;
  let lastExecTime = 0;

  return function() {
    const context = this;
    const args = arguments;
    const elapsed = Date.now() - lastExecTime;

    if (elapsed < interval) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        lastExecTime = Date.now();
        func.apply(context, args);
      }, interval - elapsed);
    } else {
      lastExecTime = Date.now();
      func.apply(context, args);
    }
  }
}

/**
 * 使用示例
 */
function doSomething() {
  console.log('do something');
}

const throttledDoSomething = throttle(doSomething, 1000);

window.addEventListener('scroll', throttledDoSomething);

这段代码中，我们定义了一个 throttle 函数，将需要执行的函数和最小间隔时间作为参数。在函数内部，我们定义了一个 timer 变量，用于存放 setTimeout 返回的定时器 ID，以及一个 lastExecTime 变量，记录上次执行的时间。在执行函数时，我们首先保存当前执行上下文和参数，计算当前时间与上次执行时间的间隔，如果间隔还没达到最小间隔时间，则使用 setTimeout 创建一个定时器，在这个定时器超时时执行函数；如果间隔已经达到最小间隔时间，则直接执行函数，并更新 lastExecTime 的值。

在使用时，我们可以将需要执行的函数和节流时间间隔作为参数传入 throttle 函数，得到一个新的节流处理过的函数。在这里，我们给 window 对象的 scroll 事件监听函数传入了这个新的节流函数，以实现节流的效果。

防抖与节流的选择

防抖与节流都是解决事件触发频繁引起性能问题的优化手段，在不同的应用场景下可能会有不同的选择。

防抖的应用场景：

• 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
• 搜索框场景：防止搜索连续触发，只在搜索结束后执行一次
• 监听滚动事件：防止滚动连续触发，只在隔一段时间后执行一次

节流的应用场景：

• 滚动加载场景：滚动时，不断加载数据，但是要控制两次请求之间的时间间隔，防止一次滚动中请求次数过多
• 统计埋点场景：多次点击进行统计时，需要控制一段时间才能进行下一次统计