在 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。

立即学习“Java免费学习笔记（深入）”；

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 <= 0) {
            previous = now;
            func.apply(this, args);
        }
    };
}

该 throttle 函数同样接收 func 和 wait。每次调用时计算当前时间与 previous 的差值，如果差值大于等于 wait，则执行函数并更新 previous。这确保了在 wait 时间段内，函数最多只执行一次。

等待时间为零时的行为差异

当等待时间设置为 0 时，防抖和节流的行为会有显著不同。防抖在 wait 为 0 时，会立即执行最后一次触发的函数（实际上是通过微任务队列异步执行），而节流在 wait 为 0 时，理论上允许高频执行，但受限于事件循环机制，实际表现取决于具体实现和浏览器调度。