【JavaScript】防抖与底层实现详解

在现代 Web 开发中，防抖（Debouncing）是优化性能的一种常见技术，常用于限制用户频繁触发事件的响应次数。本文将详细介绍 JavaScript 中的防抖技术，分析其底层实现原理，并展示如何在实际项目中灵活应用防抖以提升用户体验。

一、什么是防抖？

防抖（Debounce）是一种通过延迟函数的执行来控制其调用频率的技术。其核心思想是在短时间内多次触发同一个操作时，只执行最后一次操作，从而避免重复执行可能带来性能问题的函数。常见的使用场景包括：

• 窗口大小调整（resize）事件：避免用户在调整窗口大小的过程中频繁触发重新布局的操作。
• 搜索输入框（input）事件：防止用户每输入一个字符都发送一次请求。
• 滚动事件（scroll）：限制滚动过程中频繁调用的操作，如懒加载或页面分析。

举例说明

假设在输入框中，每当用户输入内容时，程序会自动发起一个搜索请求。如果用户输入很快，在短时间内就会发起大量的请求，导致性能瓶颈。这时我们可以使用防抖技术，使得只有用户停止输入一段时间后才真正发起搜索请求。

function search(query) {
  console.log('Searching for:', query);
}

const debounceSearch = debounce(search, 300);

// 模拟用户输入
debounceSearch('A');
debounceSearch('AB');
debounceSearch('ABC'); // 只会在最后一次调用后300ms触发一次

二、防抖的基本实现

防抖的核心是控制函数的执行时间。通过使用 setTimeout 来延迟函数的调用，如果在延迟时间内再次触发函数，就会清除上一次的 setTimeout，重新开始计时。

1. 基本防抖函数实现

function debounce(fn, delay) {
  let timer = null;  // 存储定时器

  return function (...args) {
    clearTimeout(timer);  // 清除前一次的定时器
    timer = setTimeout(() => {
      fn.apply(this, args);  // 在延迟时间之后执行目标函数
    }, delay);
  };
}

2. 代码详解

• timer：用于存储当前的定时器引用，以便后续能清除。
• clearTimeout(timer)：在每次函数触发时，先清除之前的定时器，确保只有最后一次调用才会触发函数。
• fn.apply(this, args)：通过 apply 将 this 和参数传递给目标函数，以确保 fn 的上下文和参数保持不变。

3. 应用场景示例

1. 搜索输入框防抖

当用户在输入框中输入内容时，防止频繁触发请求，只有用户停止输入一定时间后才发起搜索请求。

<input type="text" id="searchInput" placeholder="Search...">

<script>
  const input = document.getElementById('searchInput');
  input.addEventListener('input', debounce(function (event) {
    console.log('Search for:', event.target.value);
  }, 300));
</script>

2. 窗口调整防抖

在调整浏览器窗口大小时，避免频繁触发 resize 事件带来的性能问题。

window.addEventListener('resize', debounce(function () {
  console.log('Window resized');
}, 500));

三、深度剖析防抖的底层实现

1. 函数节流与防抖的区别

防抖与节流（Throttle）虽然都用于控制函数执行频率，但有明显区别：

• 防抖：在连续事件触发后，只执行最后一次。
• 节流：在连续事件中，每隔固定时间执行一次。

下图可以帮助理解两者的执行机制：

防抖：    -------(事件触发)-----[等待延迟]-----(执行)
节流：    -(执行)----[间隔时间]-----(执行)----[间隔时间]-(执行)

2. 立即执行版防抖

在某些场景下，我们希望函数立即执行，但在一段时间内不允许再次触发。这时可以通过调整防抖函数的实现来满足这种需求。

function debounce(fn, delay, immediate = false) {
  let timer = null;

  return function (...args) {
    const callNow = immediate && !timer;
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) fn.apply(this, args);
    }, delay);

    if (callNow) fn.apply(this, args);
  };
}

3. 代码解释

• immediate：用于控制函数是否立即执行。如果为 true，则函数会在首次触发时立即执行，而不是等待延迟时间结束。
• callNow：用于判断是否应该立即调用函数。只有在 immediate 为 true 且 timer 为 null 时，才会立即执行函数。

4. 立即执行防抖示例

假设我们需要在用户开始输入时立即进行一次搜索，但在用户停止输入一定时间后再进行下一次搜索。

const search = debounce(function (query) {
  console.log('Searching for:', query);
}, 300, true);

search('ABC');  // 立即执行

四、如何在实际项目中灵活应用防抖

1. 提升页面性能

对于那些高频率触发的事件（如 scroll、resize、input），防抖可以有效减少不必要的函数调用，从而提升页面性能，避免因过度渲染或重复请求带来的性能瓶颈。

2. 改善用户体验

防抖不仅可以减少不必要的性能开销，还可以避免用户在操作过程中的卡顿感。例如，在用户输入搜索内容时，防抖可以防止每输入一个字符就发送请求的情况，减少不必要的等待时间。

3. 防抖的局限性

虽然防抖在很多场景下非常有用，但它并不适合所有场景。例如，在一些需要连续、实时响应的场景中（如游戏中的按键事件），使用防抖反而会导致响应延迟。

五、总结

防抖技术是前端开发中常见的性能优化方法，通过延迟函数执行时间，能够有效减少不必要的函数调用，提升应用的性能。本文从防抖的概念出发，详细剖析了其底层实现，并提供了多种实际应用场景。通过合理运用防抖技术，可以在保持功能完整性的前提下显著改善用户体验。

推荐：

• JavaScript
• react
• vue

---