JavaScript 防抖与节流怎么支持连续调用立即执行

要实现连续调用时立即执行，需要在防抖和节流函数中增加一个 immediate 参数。对于防抖，当 immediate 为真且当前没有定时器时，立即执行回调并重置定时器；对于节流，当 immediate 为真且在冷却期外时，立即执行回调并启动冷却期。

如何实现带立即执行的防抖函数

在防抖逻辑中，通过判断 immediate 标志位来决定是否在首次触发时直接执行。如果设置了立即执行，则在清除旧定时器后立刻运行回调，并设置新的定时器以忽略后续触发。

function debounce(func, wait, immediate) {
    let timeout;
    return function(...args) {
        const context = this;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            const callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait);
            if (callNow) func.apply(context, args);
        } else {
            timeout = setTimeout(function() {
                func.apply(context, args);
            }, wait);
        }
    };
}

如何实现带立即执行的节流函数

在节流逻辑中，利用时间戳或定时器来判断是否处于冷却期。若启用立即执行，则在第一次触发时立即执行，并在随后的冷却期内忽略所有调用，直到冷却期结束。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

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

function throttle(func, wait, immediate) {
    let timeout, lastCallTime = 0;
    return function(...args) {
        const context = this;
        const now = Date.now();
        if (!immediate && now - lastCallTime < wait) {
            if (!timeout) {
                timeout = setTimeout(() => {
                    lastCallTime = Date.now();
                    timeout = null;
                    func.apply(context, args);
                }, wait - (now - lastCallTime));
            }
            return;
        }
        if (timeout) clearTimeout(timeout);
        if (immediate || now - lastCallTime > wait) {
            lastCallTime = now;
            func.apply(context, args);
        } else if (!timeout) {
            timeout = setTimeout(() => {
                lastCallTime = Date.now();
                timeout = null;
                func.apply(context, args);
            }, wait - (now - lastCallTime));
        }
    };
}

基于程序中某个输入、条件或结果的具体问题

当连续快速点击按钮时，如果启用了立即执行，用户会看到第一次点击的响应是实时的，而后续的点击会被忽略，直到间隔超过设定的等待时间。这种模式适用于需要即时反馈但又要防止频繁操作的场景，如搜索框的实时建议。