JavaScript 防抖与节流怎么封装通用工具函数-js教程-PHP中文网

封装通用工具函数需要分别处理防抖（debounce）和节流（throttle），核心在于利用闭包保存定时器或时间戳，并在返回的包装函数中根据触发时机决定是否执行原函数。对于防抖，通常使用 `settimeout` 延迟执行并清除之前的定时器；对于节流，则通过记录上次执行时间戳来判断是否达到间隔阈值。这两个函数都支持配置选项，如立即执行、最大等待时间等，以便适应不同的业务场景。

JavaScript 防抖与节流怎么封装通用工具函数

如何实现带取消功能的防抖函数

实现防抖的关键是确保在高频触发时只执行最后一次调用，可以通过返回一个包含 `cancel` 方法的对象来增强实用性。具体做法是使用 `setTimeout` 设置延迟，每次触发时清除上一次的定时器并重新设置，同时暴露 `cancel` 方法供外部手动取消 pending 的执行。这样在处理窗口 resize 或搜索输入时，既能避免频繁计算，又能允许用户主动中断等待过程。

JavaScript 防抖与节流怎么封装通用工具函数

function debounce(fn, delay = 300, immediate = false) {
  let timer = null;
  let isImmediate = false;

  const debounced = function (...args) {
    const context = this;
    if (isImmediate) {
      fn.apply(context, args);
      isImmediate = false;
    } else {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context, args);
      }, delay);
    }
  };

  debounced.cancel = function () {
    clearTimeout(timer);
    timer = null;
  };

  return debounced;
}

上述代码定义了一个 `debounce` 函数，接收目标函数 `fn`、延迟时间 `delay` 和是否立即执行 `immediate` 参数。返回的 `debounced` 函数内部维护了 `timer` 引用，每次调用时若为立即模式则直接执行并标记状态，否则清除旧定时器并设置新定时器。此外，`debounced` 对象挂载了 `cancel` 方法，用于清空定时器并重置状态，确保未执行的回调不会触发。

如何实现支持最大间隔的节流函数

节流旨在限制函数的执行频率，常用策略是记录上次执行的时间戳，只有当当前时间与上次时间之差大于设定间隔时才执行。为了优化体验，可以加入 `maxWait` 参数，确保即使持续触发，函数也能在最长等待时间后强制执行一次。这种实现方式适合处理滚动事件或按钮点击，既能降低负载，又不会让用户感觉响应迟钝。

Java调试

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

下载

JavaScript 防抖与节流怎么封装通用工具函数

function throttle(fn, interval = 300, maxWait = null) {
  let lastTime = 0;
  let timer = null;

  const throttled = function (...args) {
    const context = this;
    const now = Date.now();
    const remaining = interval - (now - lastTime);

    if (lastTime === 0 || remaining = maxWait)) {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        lastTime = Date.now();
        fn.apply(context, args);
        timer = null;
      }, remaining);
    }
  };

  throttled.cancel = function () {
    clearTimeout(timer);
    timer = null;
    lastTime = 0;
  };

  return throttled;
}

该 `throttle` 函数通过比较当前时间与 `lastTime` 来计算剩余等待时间 `remaining`。如果满足执行条件（首次调用或间隔已过），则立即执行并更新时间戳；如果设置了 `maxWait` 且距离上次执行已超过最大等待时间，则启动定时器在剩余时间内强制执行。返回的 `throttled` 函数同样提供 `cancel` 方法以清理定时器并重置状态，保证资源释放。

如何处理防抖函数中的上下文丢失问题

在封装防抖函数时，必须注意 `this` 指向和参数传递的问题。如果在返回的包装函数中没有正确绑定 `this` 和传递 `arguments`，会导致原函数执行环境错乱。解决方法是在包装函数内部使用 `apply` 或 `call` 显式指定上下文，并将可变参数数组展开传入。这样可以确保无论在哪里调用防抖后的函数，其内部的 `this` 都能正确指向调用者，参数也能完整保留。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南