在 javascript 中设置防抖（debounce）和节流（throttle）的等待时间，核心在于将时间参数传递给控制函数，并在内部使用 settimeout 或记录时间戳来实现延迟执行。对于防抖，等待时间决定了最后一次触发后多久执行；对于节流，等待时间决定了两次执行之间的最小间隔。
如何实现带等待时间的防抖函数
实现防抖的关键是清除上一次的定时器并重新设置一个新的定时器，等待时间作为参数传入。当用户在指定时间内再次触发时，之前的定时器被清除，计时器重新开始。
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
上述代码定义了一个 debounce 函数，接收目标函数 func 和等待时间 wait。返回的新函数会在每次调用时清除旧的 timeout 并创建新的。例如，若 wait 设为 300ms，则用户停止操作 300ms 后才会执行 func。
如何实现带等待时间的节流函数
节流的实现通常有两种方式：基于时间戳或基于定时器。这里展示基于时间戳的方式，它通过记录上次执行的时间来判断是否超过等待时间。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
function throttle(func, wait) {
let previous = 0;
return function(...args) {
const now = Date.now();
const remaining = wait - (now - previous);
if (remaining <p>该 <code>throttle</code> 函数同样接收 <code>func</code> 和 <code>wait</code>。每次调用时计算当前时间与 <code>previous</code> 的差值，如果差值大于等于 <code>wait</code>，则执行函数并更新 <code>previous</code>。这确保了在 <code>wait</code> 时间段内，函数最多只执行一次。</p><h2>等待时间为零时的行为差异</h2><p>当等待时间设置为 0 时，防抖和节流的行为会有显著不同。防抖在 <code>wait</code> 为 0 时，会立即执行最后一次触发的函数（实际上是通过微任务队列异步执行），而节流在 <code>wait</code> 为 0 时，理论上允许高频执行，但受限于事件循环机制，实际表现取决于具体实现和浏览器调度。</p>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
