js函数防抖与节流：全面解读，秒懂两者区别

2024-01-17 22:49:42

在JavaScript开发中，我们经常会遇到需要频繁触发的函数调用，比如页面滚动时更新导航栏位置、鼠标移动时更新元素位置等。这些频繁触发的函数调用可能会导致性能问题，因为每次函数被调用时，都会消耗一定的计算资源。为了解决这个问题，我们可以使用函数防抖和函数节流来优化代码性能。

函数防抖

函数防抖（Debounce）是一种函数优化技术，它可以防止函数被频繁调用，从而提高代码的性能。函数防抖的原理是：当一个函数在一定时间内被多次触发时，它只执行一次，直到这段时间结束后才再次执行。

函数防抖通常用于处理用户输入事件，比如键盘输入、鼠标移动等。例如，在搜索框中输入时，如果我们不使用函数防抖，那么每次用户输入一个字符，搜索结果都会被更新一次。这可能会导致性能问题，因为搜索结果的更新需要消耗大量的计算资源。

使用函数防抖后，当用户在搜索框中输入时，搜索结果只会每隔一段时间更新一次，从而减少了函数调用的次数，提高了代码的性能。

函数节流

函数节流（Throttle）也是一种函数优化技术，它可以防止函数被频繁调用，从而提高代码的性能。函数节流的原理是：当一个函数在一定时间内被多次触发时，它只执行一次，并且这段时间内不会再执行。

函数节流通常用于处理连续的事件，比如滚动事件、鼠标移动事件等。例如，在页面滚动时，如果我们不使用函数节流，那么每次页面滚动时，都会触发一个函数。这可能会导致性能问题，因为函数的执行需要消耗一定的计算资源。

使用函数节流后，当页面滚动时，函数只会在一定时间间隔内执行一次，从而减少了函数调用的次数，提高了代码的性能。

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

函数防抖和函数节流都是函数优化技术，它们都可以防止函数被频繁调用，从而提高代码的性能。但是，它们的工作原理和适用场景有所不同。

函数防抖： 函数防抖只执行最后一次函数调用，在此之前的所有函数调用都将被忽略。
函数节流： 函数节流在一定时间间隔内只执行一次函数调用，在此期间的所有函数调用都将被忽略。

函数防抖通常用于处理用户输入事件，比如键盘输入、鼠标移动等。函数节流通常用于处理连续的事件，比如滚动事件、鼠标移动事件等。

如何实现函数防抖和函数节流

在JavaScript中，我们可以使用多种方法来实现函数防抖和函数节流。最简单的方法是使用lodash库。Lodash是一个JavaScript工具库，它提供了许多有用的函数，其中包括函数防抖和函数节流。

// 使用lodash实现函数防抖
const debouncedFunction = _.debounce(function() {
  // 函数体
}, 100);

// 使用lodash实现函数节流
const throttledFunction = _.throttle(function() {
  // 函数体
}, 100);

除了使用lodash库，我们也可以自己实现函数防抖和函数节流。下面是一个实现函数防抖的示例：

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

下面是一个实现函数节流的示例：

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