debounce 和 throttle 这两种函数的区别和用例

虽然这两个函数经常用到，但也经常忘记它们的区别和场景，今天借助 ChatGPT 的整理能力做个记录。

debounce 和 throttle 都是 JavaScript 中常用的函数，它们的作用非常类似，都能够优化页面性能，降低函数调用的频率，减轻浏览器的负担，提高用户体验。它们主要的区别在于执行时间点的不同。

debounce 函数

debounce 函数指的是当一个事件在一连串触发时，只有当最后一个触发事件之后一定时间内没有新的事件触发时，才会执行事件处理函数。也就是说，debounce 函数会在最后一个事件触发后一定时间才执行一次函数，如果在这段时间内还有其他事件触发，debounce 函数就会忽略它们。这个时间段也就是 debounce 函数中指定的等待时间。例如：

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

debounce 函数的应用场景一般是用户输入检索，滚动加载，页面调整等需要确保最后一个触发事件后再执行的场景。

throttle 函数

throttle 函数指的是当一个事件在一连串触发时，某一个规定的时间段内只会执行一次事件处理函数。也就是说，如果事件连续触发多次，throttle 函数会在固定时间间隔内执行相应的函数。例如：

function throttle(func, wait) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;

    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, wait);
    }
  };
}

throttle 函数的应用场景一般是鼠标不断滚动或者拖拽时，给太多的事件适当延迟，优化性能，保证浏览器获得足够的自由度而不过度阻塞。

需要注意的是，debounce 和 throttle 函数都是为了降低函数调用频率，优化性能。但是它们的区别在于执行时机和等待时间。因此，在实际使用时需要根据具体的业务需求来选择合适的函数，以满足所期望的效果。