初探防抖：跟随 Underscore.js 揭秘防抖机制

2024-01-21 10:53:14

在软件开发的浩瀚世界中，异步操作和事件处理扮演着举足轻重的角色。其中，"防抖"是一种广泛应用的技术，用于优化用户体验，提高应用程序的响应能力。本文将带您踏上防抖的探索之旅，以 Underscore.js 中的经典实现为引子，深入剖析其原理和应用场景。

防抖的定义

防抖是一种技术，它在事件频繁触发时，延迟执行回调函数。当事件在指定的延迟时间内再次触发，之前的调用将被取消，只有最新的调用会被执行。这种机制有效地避免了因事件过快触发而导致的性能问题和意外行为。

防抖的应用场景

防抖的应用场景十分广泛，以下是一些常见的例子：

搜索建议： 当用户在搜索栏中输入时，防抖可以延迟触发建议列表，以避免频繁的网络请求和页面重绘。
表单验证： 防抖可用于延迟执行表单验证，以防止用户在输入时收到大量的验证错误提示。
滚动加载： 在页面滚动到底部时，防抖可延迟触发加载更多内容的操作，以优化页面加载速度。
窗口调整： 防抖可用于延迟触发窗口调整事件的处理，以避免在窗口频繁调整时触发不必要的操作。

Underscore.js 中的防抖实现

Underscore.js 是一个流行的 JavaScript 实用程序库，其中包含一个出色的防抖实现。让我们深入分析其源码，揭开防抖的运作原理：

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

防抖的工作原理

该实现利用闭包和计时器来实现防抖功能：

创建闭包： debounce 函数返回一个闭包，该闭包包含了防抖逻辑。闭包引用了 func 函数、wait 延迟时间和 immediate 选项。
计时器处理： 闭包中的内层函数接收事件触发时的参数，并进行以下操作：
- 取消之前的计时器： 通过 clearTimeout 取消任何挂起的计时器。这确保了只有最新触发的事件会被处理。
- 设定新的计时器： 如果 immediate 选项为 false，则设置一个计时器，在 wait 毫秒后执行回调函数。如果 immediate 为 true，则在计时器开始之前立即执行回调函数。
回调函数执行： 当计时器触发或 immediate 为 true 时，回调函数 func 会被调用，并传递事件触发的参数。