js 闭包的实际应用

一、先明确防抖函数的核心目标

防抖（debounce）的本质：频繁触发一个函数时，只让最后一次触发的函数在指定延迟后执行，中间的触发全部取消。对应搜索框场景：用户快速输入 “java” 的过程中，不会每输入一个字符就请求接口，而是等用户停止输入 500ms 后，只执行一次搜索，减少无效请求。

二、逐行拆解防抖函数的执行逻辑

我们结合代码执行流程（模拟输入 “j”->”ja”->”jav”->”java”），一步步看闭包和定时器是如何配合工作的

// 防抖函数的定义
function debounce(fn, delay) {
  // 1. 闭包变量：timer（用于保存定时器ID）
  // 关键点：这个timer在debounce执行后不会被销毁，因为返回的函数引用了它
  let timer = null;

  // 2. 返回一个新函数（实际被调用的防抖函数）
  return function(...args) {
    // 3. 每次调用防抖函数时，先清除上一次未执行的定时器
    clearTimeout(timer);

    // 4. 重新设置新的定时器，并把ID赋值给闭包的timer
    timer = setTimeout(() => {
      // 5. 延迟结束后，执行原函数，并绑定this和传递参数
      fn.apply(this, args);
    }, delay);
  };
}

// 测试代码
function search(keyword) {
  console.log(`搜索：${keyword}`);
}
const debouncedSearch = debounce(search, 500);

// 模拟快速输入
debouncedSearch("j");   // 第1次调用
debouncedSearch("ja");  // 第2次调用
debouncedSearch("jav"); // 第3次调用
debouncedSearch("java");// 第4次调用

三、核心细节深度解析

1. 闭包在这里的核心作用：保留 timer 变量

timer 定义在 debounce 函数内部，属于外层作用域变量；
返回的防抖函数（debouncedSearch）引用了 timer，且被赋值给全局变量，形成闭包；
效果：多次调用 debouncedSearch 时，共用同一个 timer，能通过 clearTimeout(timer) 取消上一次的定时器 —— 这是防抖能实现的根本原因。
如果没有闭包：每次调用防抖函数都会新建一个 timer，无法取消上一次的定时器，防抖就失效了。

2. …args 剩余参数：兼容原函数的参数传递

return function(…args) 中的 …args 是 ES6 剩余参数，用于接收调用防抖函数时传入的所有参数（比如示例中的 “j”、”ja” 等）；
执行原函数时 fn.apply(this, args)，把接收的参数透传给原函数 search，保证原函数能正常使用参数。

3. this 绑定：避免 this 丢失（关键边界处理）

为什么不用 fn(args) 而是 fn.apply(this, args)？
如果防抖函数绑定在 DOM 元素上（比如按钮点击），this 应该指向 DOM 元素；
如果直接调用 fn(args)，fn 内部的 this 会指向全局（浏览器中是 window），导致 this 丢失；
apply(this, args) 能把防抖函数执行时的 this 绑定给原函数 fn，保证 this 指向正确。

举个 DOM 场景的例子：

// 按钮点击防抖
const btn = document.querySelector("button");
btn.onclick = debounce(function() {
  console.log(this); // 若不用apply，this指向window；用了apply，this指向btn元素
}, 500);

4. timer = setTimeout(…)：保存定时器 ID

setTimeout 执行后会返回一个定时器 ID（数字），把这个 ID 赋值给 timer；
clearTimeout(timer) 正是通过这个 ID 来取消对应的定时器，这是 JS 定时器的核心机制。

四、进阶优化

原始版本的防抖函数已经能满足基础需求，但实际开发中还有 2 个常见优化点：

1. 立即执行版防抖（首次触发立即执行，后续防抖）

比如搜索框希望用户输入第一个字符时立即搜索，后续输入防抖：

function debounce(fn, delay, immediate = false) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);

    // 立即执行逻辑
    if (immediate && !timer) {
      fn.apply(this, args);
    }

    timer = setTimeout(() => {
      // 非立即执行的情况，或立即执行后重置timer
      if (!immediate) {
        fn.apply(this, args);
      }
      timer = null; // 执行后清空timer，保证下一次immediate生效
    }, delay);
  };
}

// 使用：首次输入立即执行，后续防抖
const debouncedSearch = debounce(search, 500, true);
debouncedSearch("j"); // 立即输出「搜索：j」
debouncedSearch("ja"); // 取消后续执行，500ms后无输出
debouncedSearch("java"); // 500ms后输出「搜索：java」

2. 取消防抖（手动终止）

比如用户输入过程中点击「取消搜索」，需要终止防抖函数的执行：

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

  // 防抖函数
  const debounced = function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };

  // 新增取消方法
  debounced.cancel = function() {
    clearTimeout(timer);
    timer = null;
  };

  return debounced;
}

// 使用取消功能
const debouncedSearch = debounce(search, 500);
debouncedSearch("java");
// 手动取消：500ms后不会执行search
debouncedSearch.cancel();

总结

闭包的核心作用：保留 timer 变量，让多次调用防抖函数能共用同一个定时器 ID，实现 “取消上一次、保留最后一次” 的核心逻辑。
关键细节：…args 透传参数、apply(this, args) 绑定 this，是保证防抖函数通用性的核心，避免参数 /this 丢失。
执行逻辑：每次调用防抖函数先清掉旧定时器，再设置新定时器，最终只有最后一次触发的定时器会执行原函数。

全局变量没有 “作用域隔离”，哪怕是单个防抖函数，也可能被其他代码意外修改 —— 这是前端开发中 “全局污染” 的经典坑，而闭包的私有变量能完美规避。