返回

一文搞定JavaScript的防抖与节流的理解与封装

前端



引言

在前端开发中，我们经常会遇到需要频繁触发事件的情况，比如滚动、拖拽、键盘输入等。如果我们对这些事件不做任何处理，那么就会导致页面的性能下降，甚至卡顿。

为了解决这个问题，我们可以使用防抖和节流技术。防抖可以防止函数在一段时间内被多次调用，而节流可以确保函数在一段时间内只被调用一次。这篇文章将详细解释防抖和节流的概念、实现原理、以及如何使用它们来优化JavaScript应用程序的性能。


防抖

防抖（debounce）是一种函数优化技术，它可以防止函数在一段时间内被多次调用。当一个函数被防抖处理后，它只会在最后一次调用后的一段时间内被执行。如果在这段时间内函数又被调用，那么之前的调用将被取消，新的调用将被重新计时。

防抖的实现原理很简单，它使用了一个计时器。当函数被调用时，计时器就会被重置。如果在计时器到期之前函数又被调用，那么计时器就会被重新重置。只有当计时器到期后，函数才会被执行。

防抖可以用来优化各种类型的函数，比如滚动事件、拖拽事件、键盘输入事件等。它可以防止这些函数在一段时间内被多次调用，从而提高页面的性能。

节流

节流（throttle）也是一种函数优化技术，它可以确保函数在一段时间内只被调用一次。当一个函数被节流处理后，它只会在一开始被调用，然后在一段时间内都不会被调用。只有当这段时间过后，函数才会再次被调用。

节流的实现原理也使用了一个计时器。当函数被调用时，计时器就会被重置。如果在计时器到期之前函数又被调用，那么之前的调用将被忽略，新的调用将被重新计时。只有当计时器到期后，函数才会被执行。

节流可以用来优化各种类型的函数，比如滚动事件、拖拽事件、键盘输入事件等。它可以确保这些函数在一段时间内只被调用一次，从而提高页面的性能。

防抖与节流的比较

防抖和节流都是函数优化技术，它们都有助于提高页面的性能。但是，它们之间还是有一些区别的。

  • 防抖只会在最后一次调用后的一段时间内执行函数，而节流会在一开始执行函数，然后在一段时间内都不会执行函数。
  • 防抖更适合于那些需要在一段时间内只执行一次的函数，比如滚动事件、拖拽事件、键盘输入事件等。而节流更适合于那些需要在一段时间内多次执行的函数，比如动画、视频播放等。

如何使用防抖和节流

我们可以使用 lodash 库来轻松地使用防抖和节流。Lodash 是一个 JavaScript 库，它提供了许多有用的函数，包括防抖和节流函数。

要使用 Lodash 的防抖函数，我们可以使用 _.debounce() 方法。这个方法接受两个参数：第一个参数是我们要防抖的函数，第二个参数是防抖的延迟时间。

const debouncedFunction = _.debounce(function() {
  // 要执行的函数
}, 100);

上面的代码将创建一个防抖函数，它将在最后一次调用后 100 毫秒内执行函数。

要使用 Lodash 的节流函数，我们可以使用 _.throttle() 方法。这个方法接受两个参数：第一个参数是我们要节流的函数，第二个参数是节流的延迟时间。

const throttledFunction = _.throttle(function() {
  // 要执行的函数
}, 100);

上面的代码将创建一个节流函数，它将在开始后 100 毫秒内执行函数，然后在一段时间内都不会执行函数。只有当这段时间过后，函数才会再次被调用。


总结

防抖和节流是 JavaScript 中用于优化性能的两种重要技术。防抖可以防止函数在一段时间内被多次调用，而节流可以确保函数在一段时间内只被调用一次。我们可以使用 Lodash 库来轻松地使用防抖和节流。