JavaScript 基础练习中闭包怎么实现防抖和节流高阶函数-js教程-PHP中文网

闭包是实现防抖和节流的核心机制——它使内部函数能持续访问外部作用域的变量（如timer、时间戳），从而精准控制执行频率；每个调用生成独立闭包，确保状态隔离、互不干扰。

javascript 基础练习中闭包怎么实现防抖和节流高阶函数

闭包是实现防抖（debounce）和节流（throttle）的核心机制——它让内部函数能持续访问并操作外部函数作用域中的变量（比如定时器 ID、上一次执行时间等），从而控制函数的执行频率。

用闭包实现防抖（Debounce）

防抖的逻辑是：在事件被频繁触发时，只执行最后一次触发后的回调，中间的触发全部被“忽略”。关键靠闭包保存 上一个定时器的引用，每次新触发时先清除旧定时器，再设新定时器。

示例代码：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用
const search = debounce((query) => {
  console.log('请求搜索:', query);
}, 300);

input.addEventListener('input', (e) => search(e.target.value));

闭包保留了 timer 变量，确保每次调用返回的函数都能读写同一个定时器句柄
每次输入都重置倒计时，只有停顿超过 delay 后才真正执行
注意：若需立即执行首次调用（leading edge），可扩展为带 immediate 参数的版本

用闭包实现节流（Throttle）

节流是固定时间间隔内最多执行一次，适合处理 scroll、resize 等高频事件。常用“定时器 + 时间戳”双策略，闭包用来维持 上次执行时间 或 等待中的定时器状态。

定时器版（推荐，更稳定）：

function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}