什么是防抖以及如何在 JavaScript 中实现防抖？

最新推荐文章于 2025-04-11 00:03:56 发布

人才程序员

最新推荐文章于 2025-04-11 00:03:56 发布

阅读量781

点赞数 14

分类专栏：前端三件套文章标签： javascript 开发语言 ecmascript html5 前端 firefox css

本文链接：https://blog.youkuaiyun.com/m0_62599305/article/details/145807922

版权

前端三件套专栏收录该内容

207 篇文章

订阅专栏

文章目录

🧑‍💻 什么是防抖以及如何在 JavaScript 中实现防抖？

🧑‍💻 什么是防抖以及如何在 JavaScript 中实现防抖？

在现代的 Web 开发中，用户交互的频繁性常常会导致性能问题。例如，用户在输入框中快速输入文字时，输入框会频繁触发 keyup 事件，或者用户滚动页面时，滚动事件会频繁触发，可能导致不必要的计算或请求。为了优化性能，我们可以使用防抖（Debounce）技术，来控制事件触发的频率，避免过度的执行。

今天，我们将探讨什么是防抖，为什么它在开发中非常重要，并且深入了解如何在 JavaScript 中实现防抖功能。🎯

🧐 1. 什么是防抖（Debounce）？

防抖是一种通过限制事件触发的频率，避免频繁触发某些操作的技术。它通常应用于需要等待一段时间才执行的操作，常见的应用场景包括：

输入框搜索：当用户在搜索框中输入内容时，防抖可以确保不会在每次输入时都发起请求，而是等待用户停止输入一段时间后再发起请求。
滚动监听：防抖可以帮助减少滚动事件的频繁触发，避免每次滚动都进行昂贵的操作（例如请求加载更多数据）。
窗口尺寸变化：当用户调整窗口尺寸时，防抖可以避免每次改变尺寸时都执行大量计算。

防抖的基本原理

防抖的基本原理是：如果在指定时间内，事件没有再次被触发，则执行目标操作；如果事件再次被触发，则重新计时。这意味着，只有在事件触发停止后的一段时间内才会执行操作。

🧠 2. 防抖的实现思路

防抖的核心思想是借助 setTimeout() 来延迟执行函数，并在每次事件触发时重置计时器，从而控制函数的执行时机。我们可以通过以下几个步骤来实现防抖：

监听事件：每次事件被触发时，启动计时器。
清除定时器：如果在计时器还没执行之前，事件被再次触发，则清除上一个定时器。
执行操作：当事件停止触发，计时器时间到达时，执行目标操作。

⚡ 3. 防抖的底层实现

3.1 基本的防抖实现

我们来实现一个简单的防抖函数，使用 setTimeout() 来延迟执行目标函数。

示例：基本防抖实现

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    if (timer) {
      clearTimeout(timer); // 清除上一个定时器
    }

    timer = setTimeout(() => {
      fn.apply(this, args); // 在延迟后执行目标函数
    }, delay);
  };
}

// 测试防抖函数
const handleSearch = debounce(function (event) {
  console.log('Searching for:', event.target.value);
}, 500);

document.getElementById('search').addEventListener('input', handleSearch);

在这个例子中：

debounce() 函数接收两个参数：fn 是要防抖的目标函数，delay 是延迟执行的时间。
每次触发事件时，我们都会清除上一个计时器，并重新设置一个新的定时器。只有在事件停止触发一段时间后，目标函数才会执行。

3.2 防抖函数的返回值

防抖函数的返回值是一个新的函数，这个函数会替代原来的事件处理函数。每次事件触发时，返回的新函数会清除旧的计时器，并设置新的计时器，直到事件触发停止。

3.3 防抖函数中的 `apply` 与 `this`

在防抖函数内部，我们使用 apply() 方法来确保目标函数执行时，this 的上下文是正确的，并且能够传递正确的参数。这样可以确保防抖后的函数能够按照预期的方式工作。

💡 4. 防抖的优化：取消防抖

有时我们希望在某个特定的时刻手动取消防抖操作。为此，我们可以在防抖函数中添加取消定时器的功能。下面我们实现一个带有取消功能的防抖函数：

示例：带取消功能的防抖实现

function debounce(fn, delay) {
  let timer;

  function debounced(...args) {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }

  // 提供取消功能
  debounced.cancel = function () {
    clearTimeout(timer);
  };

  return debounced;
}

// 使用防抖函数
const handleSearch = debounce(function (event) {
  console.log('Searching for:', event.target.value);
}, 500);

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', handleSearch);

// 取消防抖操作
document.getElementById('cancel').addEventListener('click', function () {
  handleSearch.cancel();
});

在这个例子中，我们在返回的防抖函数上添加了一个 cancel() 方法，可以用来手动取消当前的防抖操作。当调用 cancel() 时，定时器会被清除，防止目标函数被触发。

🧩 5. 防抖与节流的区别

防抖和节流都是优化事件处理的技术，但它们的工作原理不同：

特性	防抖（Debounce）	节流（Throttle）
触发频率	事件触发后，在一定时间内只执行一次	事件触发后，每隔一定时间执行一次
适用场景	适用于防止快速连续触发的操作，如输入框搜索	适用于限制高频率触发的操作，如滚动监听、窗口大小调整
执行时机	事件停止触发一段时间后才执行	每隔一定时间执行一次

防抖的目的是避免重复执行，尤其是用户输入或快速触发时，而节流的目的是控制函数执行的频率。