JavaScript函数中的防抖与节流：原生实现与第三方库的使用

2023-12-23 23:30:58

防抖和节流：提升 JavaScript 函数执行频率的神兵利器

简介

在现代 Web 开发中，我们经常会遇到需要频繁触发函数的情况，比如滚动条监听、鼠标移动监听和键盘输入监听。这些函数的触发频率通常很高，如果不加以优化，会严重影响页面响应速度和用户体验。为了解决这个问题，我们可以借助防抖和节流这两种技术来优化函数的执行频率。

防抖

原理：

防抖通过延迟函数的执行时间，从而防止函数在短时间内被多次调用。当一个函数被防抖处理后，它只会在最后一次调用后的一段时间内被执行。

实现：

可以使用一个定时器来实现防抖。当函数被调用时，先启动一个定时器，然后在定时器到期后才执行函数。如果在定时器到期之前函数又被调用了，那么我们就重新启动定时器，这样函数就不会被执行了。

代码示例：

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

节流

原理：

节流通过限制函数在一定时间内只能被执行一次，从而降低函数的执行频率。当一个函数被节流处理后，它只会在规定的时间间隔内被执行一次。

实现：

可以使用一个变量来记录函数上次被执行的时间。当函数被调用时，先检查一下上次被执行的时间，如果距离上次被执行的时间还没有超过规定的时间间隔，那么函数就不会被执行。如果距离上次被执行的时间已经超过了规定的时间间隔，那么函数就会被执行。

代码示例：

function throttle(func, wait) {
  let lastTime = 0;
  return function() {
    const args = arguments;
    const context = this;
    const now = Date.now();
    if (now - lastTime < wait) {
      return;
    }
    lastTime = now;
    func.apply(context, args);
  };
}