防抖函数与节流函数：提升程序性能的利器

2023-11-27 21:16:56

在编写前端代码时，我们常常会遇到需要处理大量事件的情况，比如用户滚动页面、鼠标移动、按键按下等等。如果不加控制，这些事件可能会在短时间内触发大量的函数调用，从而导致程序性能下降。为了解决这个问题，我们需要使用节流函数和防抖函数来控制函数的调用频率。

节流函数

节流函数可以确保函数在一定时间内只执行一次，即使在该时间内函数被调用多次。节流函数的原理是，它会在函数的开头设置一个计时器，如果在计时器结束之前函数再次被调用，那么计时器将被重置，函数不会被执行。直到计时器结束，函数才会被执行一次。

防抖函数

防抖函数与节流函数类似，但也有所不同。防抖函数会在函数的结尾设置一个计时器，如果在计时器结束之前函数再次被调用，那么计时器将被重置，函数不会被执行。直到计时器结束，函数才会被执行一次。

应用场景

节流函数和防抖函数都有广泛的应用场景。

节流函数常用于处理用户输入事件，比如用户滚动页面、鼠标移动、按键按下等等。通过使用节流函数，我们可以防止这些事件在短时间内触发大量的函数调用，从而提高程序性能。

防抖函数常用于处理用户输入事件，比如用户在搜索框中输入内容、用户在表单中填写信息等等。通过使用防抖函数，我们可以防止用户在短时间内触发大量的函数调用，从而提高程序性能。

实例

以下是一个节流函数的示例：

function throttle(func, wait) {
  let timer = null;
  return function () {
    if (timer === null) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

以下是一个防抖函数的示例：

function debounce(func, wait) {
  let timer = null;
  return function () {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, wait);
  };
}