一文搞定js防抖节流

_XU
86 阅读3分钟

在现代web开发中，优化用户体验是至关重要的，而性能是实现良好用户体验的一个关键因素。由于javascript事件处理器经常需要处理高频率的事件（如window的resize，scroll，input输入内容等），这会导致事件处理器不断被调用，从而降低整个应用程序的性能，因此有必要使用一些技术来缓解这种情况。

两种常见的技术是防抖（debounce）和节流（throttle）.

1. 防抖

当事件触发时，相应的函数不会立即执行，而是将事件推迟到一个稍后的时间执行，只有在等待一段时间之后，如果在这段时间内没有再次触发该事件，那么函数才会真正地被执行。如果在等待期间再次触发了相同的事件，那么计时器就会被重置。这种方法旨在防止在短时间内反复触发事件所引起的性能问题。

以下是js代码示例：

function debounce(fn, delay) {
  let timer = null;
  return function () {
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

以上代码演示了如何使用setTimeout函数来实现一个简单的防抖函数，该函数只能在事件调用后的一段时间内被执行一次。

实际上，现在许多javascript库（如Lodash等）都包含优化的debounce函数，可以更方便地使用，并提供更多的选项和功能。

2. 节流

节流技术与防抖技术类似，不同之处在于，节流函数不会将事件推迟到稍后执行，而是采用一种不同的方式来限制事件处理器的执行次数。具体来说，节流函数会在每个时间段内固定地调用函数，而不管这段时间内有多少次事件调用。

以下是js代码示例：

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

以上代码演示了如何使用setTimeout函数来实现一个简单的节流函数，该函数会在两次调用之间设置一个时间延迟，从而限制函数的执行频率。

实际上，现在许多javascript库（如Lodash等）都包含优化的throttle函数，可以更方便地使用，并提供更多的选项和功能。

3. 防抖和节流的选择

在实际情况下，选择使用防抖还是节流取决于需要优化的应用程序的具体情况。防抖技术对于处理只需要一定间隔内的时间调用的事件非常有帮助，而节流技术适用于处理需要进行周期性调用的事件。

总结

在实际开发中，js防抖和节流是两种非常常用的优化技巧，这两种技巧可以帮助我们减轻浏览器负担，优化用户体验。通过本文所提供的示例代码，我们可以很容易地将这些技术应用到我们的项目中。

avatar
文章
阅读
粉丝