手写面试必备：防抖进阶指南

前端

2024-02-20 19:44:59

导言

在现代前端开发中，防抖是一种常见的技术，用于优化用户输入处理并防止不必要的函数调用。在面试中，手写防抖代码往往是考察候选人基础功和对 JavaScript 理解程度的重要环节。本文将全面解析手写防抖函数的进阶指南，助你轻松应对面试挑战。

防抖原理

防抖的原理很简单：它通过在一定时间内抑制重复的函数调用，从而防止不必要的资源消耗和性能问题。具体来说，防抖函数会在触发事件发生后开始一个计时器。如果在计时器完成之前再次触发事件，则计时器会重新开始。只有当计时器完成时，函数才会执行。

手写防抖函数

以下是用 JavaScript 手写防抖函数的步骤：

声明一个闭包 ：创建一个包含防抖逻辑的闭包，它可以访问外部变量。
初始化计时器 ：使用 setTimeout() 函数创建一个计时器，并在指定时间后触发函数执行。
处理事件 ：当事件被触发时，检查计时器是否正在运行。如果是，则重置计时器。如果不是，则启动计时器。
执行函数 ：当计时器完成时，执行关联的函数。

进阶技巧

除了基本的手写防抖函数外，还有几个进阶技巧可以增强其功能：

立即调用 ：设置 immediate 参数为 true，表示函数在计时器启动时立即执行一次，然后按照正常的防抖逻辑进行。
取消防抖 ：提供一个方法来取消防抖，以便在不再需要时停止计时器。
长尾节流 ：结合函数节流和防抖，在用户输入快速发生时防止频繁的函数调用。

示例代码

// 基本防抖函数
const debounce = (func, delay) => {
  let timer;
  return (...args) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => func(...args), delay);
  };
};

// 进阶防抖函数（支持立即调用）
const debounceWithImmediate = (func, delay, immediate = false) => {
  let timer;
  return (...args) => {
    if (timer) clearTimeout(timer);
    if (immediate) {
      func(...args);
      immediate = false;
    }
    timer = setTimeout(() => func(...args), delay);
  };
};