剖析函数去抖(debounce)与函数节流(throttle)优化JS性能

前端

2023-09-07 20:43:53

函数去抖(debounce)

函数去抖是一种延迟函数执行的技术。它在函数被调用后，会等待一段时间再执行，如果在这段时间内函数又被调用了，那么就取消上一次的调用，只执行最后一次调用。

函数去抖的原理是使用计时器。当函数第一次被调用时，会启动一个计时器，这个计时器会等待一段时间（通常是几百毫秒）后执行函数。如果在这段时间内函数又被调用了，那么就会重置计时器，这样函数就不会执行。只有当计时器执行后，函数才会真正执行。

函数去抖可以优化事件处理，减少不必要的函数调用。例如，当用户在文本输入框中输入文字时，如果每次输入都会触发一个函数，那么这个函数就会被频繁调用，这可能会导致性能问题。使用函数去抖可以将这些频繁的函数调用合并成一次，从而提高性能。

函数节流(throttle)

函数节流是一种限制函数执行频率的技术。它在函数被调用时，会等待一段时间，如果在这段时间内函数又被调用了，那么就只执行一次函数，而不会执行后面的调用。

函数节流的原理是使用计时器。当函数第一次被调用时，会启动一个计时器，这个计时器会等待一段时间（通常是几百毫秒）后执行函数。如果在这段时间内函数又被调用了，那么就会重置计时器，这样函数就不会执行。只有当计时器执行后，函数才会真正执行。

函数节流可以优化事件处理，减少不必要的函数调用。例如，当用户滚动页面时，如果每次滚动都会触发一个函数，那么这个函数就会被频繁调用，这可能会导致性能问题。使用函数节流可以将这些频繁的函数调用限制在一定频率内，从而提高性能。

函数去抖与函数节流的区别

函数去抖和函数节流都是优化事件处理的技巧，但它们有不同的原理和适用场景。

函数去抖适用于需要在一段时间后执行一次函数的情况，例如，文本输入框中的文字改变后，需要延迟一段时间再触发一个函数。
函数节流适用于需要限制函数执行频率的情况，例如，页面滚动时，需要限制函数的执行频率，以避免性能问题。

函数去抖与函数节流的实现

函数去抖和函数节流都可以使用JavaScript的计时器函数来实现。

// 函数去抖
function debounce(func, wait) {
  let timer;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 函数节流
function throttle(func, wait) {
  let canRun = true;
  return function(...args) {
    if (!canRun) {
      return;
    }
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, wait);
  };
}