防抖与节流：让你的 JavaScript 事件处理更流畅

前端

2023-11-20 02:22:59

前言

在前端开发中，我们经常会遇到需要处理事件的情况，比如点击、滚动、鼠标移动等。这些事件可能会非常频繁地触发，如果我们不加以控制，就会导致函数被重复调用，从而降低性能并造成不必要的开销。

debounce和throttle都是为了解决这个问题而提出的技术手段。它们都可以控制函数在一段时间内执行的次数，但它们实现原理不同，适用于不同的场景。

防抖（debounce）

防抖（debounce）是一种技术，它可以让函数在一段时间内只执行一次。当函数被多次调用时，它会将这些调用合并为一次，并在最后一次调用后执行函数。

debounce的原理是使用一个计时器。当函数第一次被调用时，计时器会启动。如果在计时器结束之前函数又被调用，那么计时器会重新启动。这样，函数就只会执行一次，直到计时器结束。

debounce非常适合用于处理那些不需要频繁触发的事件，比如表单提交、窗口调整大小等。

节流（throttle）

节流（throttle）是一种技术，它可以让函数在一段时间内只执行一次，但与debounce不同的是，节流会在一段时间内只允许函数执行一次，无论函数被调用多少次。

节流的原理是使用一个时间戳。当函数第一次被调用时，时间戳会被记录下来。如果在一段时间内函数又被调用，那么会检查时间戳是否已经更新。如果时间戳没有更新，那么函数就不会执行。如果时间戳已经更新，那么函数就会执行，并更新时间戳。

节流非常适合用于处理那些需要频繁触发的事件，比如滚动、鼠标移动等。

如何使用debounce和throttle

debounce和throttle都可以通过JavaScript原生方法或第三方库来实现。下面我们分别介绍一下这两种方法的使用方法。

使用JavaScript原生方法

在JavaScript中，我们可以使用setTimeout()和clearTimeout()方法来实现debounce和throttle。

debounce

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

throttle

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

使用第三方库

在JavaScript中，有很多第三方库可以帮助我们实现debounce和throttle，比如Lodash、Underscore和RxJS等。

Lodash是一个非常流行的JavaScript库，它提供了debounce和throttle这两个方法。

const debouncedFunc = _.debounce(func, wait);
const throttledFunc = _.throttle(func, wait);

Underscore是一个与Lodash非常相似的JavaScript库，它也提供了debounce和throttle这两个方法。

const debouncedFunc = _.debounce(func, wait);
const throttledFunc = _.throttle(func, wait);

RxJS是一个非常强大的JavaScript库，它提供了非常丰富的操作符，其中就包括debounce和throttle这两个操作符。

const debouncedFunc = Rx.Observable.fromEvent(element, 'click')
  .debounceTime(wait)
  .subscribe(func);
const throttledFunc = Rx.Observable.fromEvent(element, 'click')
  .throttleTime(wait)
  .subscribe(func);