防抖和节流：您需要知道的代码 ✓

2024-02-11 14:21:54

前言

在前端开发中，我们经常会遇到这样的场景：用户在输入框中输入内容时，我们希望在用户停止输入一段时间后才执行某些操作。或者，我们希望用户连续点击按钮时，只执行一次操作。这些场景中，我们都可以使用防抖或节流来实现。

防抖

防抖（debounce）是一种技术，它可以防止函数在一段时间内被多次执行。也就是说，当函数被调用时，它会在一段时间内被“延迟”执行。只有当这段时间内函数没有被再次调用，它才会真正执行。

防抖的原理很简单，它使用了一个定时器。当函数被调用时，它会启动一个定时器。如果在定时器结束之前函数又被调用，那么定时器就会被重置。只有当定时器结束时，函数才会真正执行。

防抖的代码实现如下：

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

节流

节流（throttle）是一种技术，它可以限制函数在一段时间内只执行一次。也就是说，当函数被调用时，它会在一段时间内被“禁止”执行。只有当这段时间结束时，它才会再次允许执行。

节流的原理也比较简单，它使用了一个标记。当函数被调用时，它会检查这个标记。如果标记为true，那么函数会被禁止执行。只有当标记为false时，函数才会真正执行。

节流的代码实现如下：

function throttle(fn, wait) {
  let canRun = true;
  return function() {
    if (!canRun) {
      return;
    }
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, wait);
  };
}

防抖和节流的区别

防抖和节流都是用来控制函数执行频率的技术，但它们之间还是有一些区别的。

防抖只会在函数被调用一段时间后执行一次，而节流会在函数被调用一段时间后执行多次。
防抖适合用于处理用户输入等场景，而节流适合用于处理连续点击等场景。

如何使用防抖和节流

防抖和节流都可以通过Lodash库来实现。Lodash是一个非常流行的JavaScript库，它提供了许多有用的函数，其中就包括防抖和节流函数。

以下是如何使用Lodash来实现防抖和节流：

// 防抖
import debounce from 'lodash/debounce';

const debouncedFn = debounce(fn, wait);

// 节流
import throttle from 'lodash/throttle';

const throttledFn = throttle(fn, wait);