优化前端交互体验：JavaScript防抖和节流助力减少不必要的函数调用

2023-11-13 12:57:14

JavaScript中的函数防抖和节流

在前端开发中，我们经常会遇到这样的场景：某个函数被频繁调用，导致程序性能下降。例如，当我们在文本框中输入内容时，浏览器会不断触发键盘输入事件，导致与之绑定的函数被反复调用，这不仅会影响程序的性能，还会带来不必要的开销。

为了解决这个问题，JavaScript中引入了函数防抖和节流的概念。函数防抖和节流都是用来限制函数的触发频率，但它们的工作原理和应用场景却有所不同。

函数防抖

函数防抖（debounce）是一种技术，它允许函数在一段时间内只执行一次，即使在这段时间内函数被触发多次。函数防抖的原理是：当函数第一次被触发时，它会立即执行一次。如果在这段时间内函数又被触发，那么之前的执行会被取消，直到这段时间结束后，函数才会再次执行。

函数防抖常用于减少文本框输入事件的触发频率。当我们在文本框中输入内容时，浏览器会不断触发键盘输入事件，如果我们直接将这些事件与函数绑定，那么函数会被频繁调用，导致程序性能下降。为了解决这个问题，我们可以使用函数防抖，它允许函数在一段时间内只执行一次，即使在这段时间内函数被触发多次。这样，我们就可以减少函数的调用次数，从而提升程序的性能。

函数节流

函数节流（throttle）是一种技术，它允许函数在一定时间间隔内只执行一次，即使在这段时间内函数被触发多次。函数节流的原理是：当函数第一次被触发时，它会立即执行一次。如果在这段时间内函数又被触发，那么它的执行会被推迟，直到这段时间结束后，函数才会再次执行。

函数节流常用于减少滚动事件和调整窗口大小事件的触发频率。当我们在页面中滚动或调整窗口大小时，浏览器会不断触发滚动事件和调整窗口大小事件。如果我们直接将这些事件与函数绑定，那么函数会被频繁调用，导致程序性能下降。为了解决这个问题，我们可以使用函数节流，它允许函数在一定时间间隔内只执行一次，即使在这段时间内函数被触发多次。这样，我们就可以减少函数的调用次数，从而提升程序的性能。

如何实现函数防抖和节流

在JavaScript中，我们可以使用多种方法来实现函数防抖和节流。其中，最常用的方法是使用定时器和闭包。

使用定时器实现函数防抖

// 函数防抖
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

使用定时器实现函数节流

// 函数节流
const throttle = (fn, delay) => {
  let timer = null;
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime > delay) {
      fn(...args);
      lastCallTime = now;
    } else if (!timer) {
      timer = setTimeout(() => {
        fn(...args);
        lastCallTime = Date.now();
        timer = null;
      }, delay);
    }
  };
};

使用闭包实现函数防抖和节流

// 函数防抖
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        fn(...args);
      }, delay);
    }
  };
};

// 函数节流
const throttle = (fn, delay) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCallTime > delay) {
      lastCallTime = now;
      fn(...args);
    }
  };
};