JavaScript 的防抖与节流函数怎么编写-js教程-PHP中文网

防抖是“等不再触发才执行”，节流是“固定间隔最多执行一次”；防抖适用于搜索输入等场景，每次触发重置定时器，分立即与非立即模式；节流适用于滚动拖拽，常用时间戳或定时器实现，需注意首次执行和尾部触发；实际使用需避免重复创建、支持cancel清理。

javascript 的防抖与节流函数怎么编写

防抖和节流都是用来控制函数执行频率的常用手段，核心区别在于：防抖是“等不再触发了才执行”，节流是“固定间隔内最多执行一次”。写法不难，但关键在理解触发时机和清除逻辑。

防抖函数（Debounce）

适用于搜索框输入、窗口大小调整等场景——用户连续操作时，只响应最后一次操作。

每次触发都重置定时器，上一次未执行的回调被取消
需要区分立即执行模式（首次触发立刻执行，后续等待）和非立即执行模式（只在停止触发后执行）
注意 this 和参数的正确传递，建议用 apply 或箭头函数闭包保存上下文

基础写法（非立即执行）：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

节流函数（Throttle）

适用于鼠标滚动、拖拽等高频事件——保证函数按固定节奏执行，避免过度消耗资源。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

常用时间戳或定时器两种实现方式；时间戳版更简洁，但首次触发立即执行；定时器版可控制首次是否延迟
关键点是记录上次执行时间或锁状态，避免重复触发
推荐使用时间戳 + 闭包方式，兼顾可读性和准确性

时间戳版示例：

实际使用注意事项

直接复制代码可能出问题，这些细节容易忽略：

防抖函数返回的新函数每次调用都会产生新闭包，若需多次复用同一防抖实例，应提前创建并保存
节流中若用定时器实现，需额外处理“最后一次触发未执行”的情况（加个尾部触发逻辑）
Vue/React 中绑定事件时，注意不要在 render 中反复创建防抖/节流函数，否则失去缓存效果
考虑是否需要支持取消功能（如提供 cancel 方法），尤其在组件卸载时清理定时器

简单封装增强版（带 cancel）

生产环境建议加 cancel 能力，便于生命周期管理：

function debounce(func, wait) {
  let timeout;
  const debounced = function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
  debounced.cancel = () => clearTimeout(timeout);
  return debounced;
}

调用后可通过 debounced.cancel() 主动清理，防止内存泄漏或意外执行。

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