JavaScript 中防抖函数怎么在最后一次触发时追加回调-js教程-PHP中文网

防抖函数默认在触发停止后延迟执行回调；若需最后一次调用时立即执行，应通过显式信号（如immediate标志或flush方法）实现，而非自动判断“最后一次”，因JavaScript无法预知后续调用。

javascript 中防抖函数怎么在最后一次触发时追加回调

防抖函数（debounce）默认行为是：在触发停止后等待指定延迟，再执行回调。若你想在最后一次触发时“立即追加执行一次回调”（即：既保留原有防抖逻辑，又在最后一次调用时同步触发一次），这其实已偏离标准防抖语义，更接近「防抖 + 立即执行最后一次」的混合策略。常见做法是通过一个标志位控制是否立即执行，并重置定时器。

核心思路：标记最后一次调用并强制触发

关键不是修改防抖本身，而是在调用时主动告知“这是最后一次”。实现方式是在调用 debounced 函数时传入一个特殊信号（如 immediate: true），或提供一个单独的 flush() 方法来手动清空并执行当前待定任务。

方案一：支持 immediate 标志的增强版防抖

这个版本允许每次调用时选择是否立即执行（类似 Vue 的 v-model.lazy 但用于函数）：

function debounce(func, wait, options = {}) {
  let timeout = null;
  const { leading = false, trailing = true } = options;

  const debounced = function(...args) {
    const callNow = leading && !timeout;
    clearTimeout(timeout);

    if (callNow) {
      func.apply(this, args);
    }

    timeout = setTimeout(() => {
      if (trailing && !options.immediate) {
        func.apply(this, args);
      }
      timeout = null;
    }, wait);

    // 若本次调用明确标记为 immediate，则立刻执行（覆盖 trailing）
    if (options.immediate === true) {
      func.apply(this, args);
    }
  };

  // 提供手动触发接口
  debounced.flush = function() {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
      func.apply(this, arguments);
    }
  };

  return debounced;
}

使用示例：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const save = debounce(() => console.log('保存'), 500);

// 普通防抖：输入停顿后执行
input.addEventListener('input', save);

// 最后一次想立刻保存？调用 flush：
input.addEventListener('blur', () => save.flush());