JavaScript节流（throttle）函数无延迟问题排查与修复求助

我参考资料实现了节流（throttle）函数，但无法正常工作。连续点击按钮时，shouldWait始终输出false，完全没按预期变为true，也不会进入对应的判断分支。

我的代码如下： #

JavaScript代码

function printHi() {
    console.log("Hi");
}

function throttle(cb, delay = 1000) {
    let shouldWait = false
    let waitingArgs
    const timeoutFunc = () => {
        if (waitingArgs == null) {
            shouldWait = false
        } else {
            cb(...waitingArgs)
            waitingArgs = null
            setTimeout(timeoutFunc, delay)
        }
    }

    return (...args) => {
        console.log("should wait?", shouldWait);

        if (shouldWait) {
// 这里从未执行过...?
            waitingArgs = args
            return
        }

        cb(...args)
        shouldWait = true
        setTimeout(timeoutFunc, delay)
    }
}

HTML代码

<button onclick="(function () {
    throttle(printHi)();
})()">Click me</button>

控制台输出 #

should wait? false
Hi
should wait? false
Hi
should wait? false
Hi

问题原因 #

每次点击按钮时，你都重新调用了throttle(printHi)，这会生成一个全新的节流函数实例。每个实例都有自己独立的shouldWait变量，所以每次点击的都是新的“干净”实例，shouldWait永远不会被保留为true状态。

解决方法 #

你需要提前创建好节流函数的实例，所有点击都复用同一个实例，这样状态才能被正确维护。

方法1：提前创建全局节流实例

修改JavaScript代码，在全局作用域生成节流后的函数：

function printHi() {
    console.log("Hi");
}

// ... 保持throttle函数不变 ...

// 提前创建节流实例
const throttledPrintHi = throttle(printHi);

然后修改HTML的点击事件，直接调用这个预创建的实例：

<button onclick="throttledPrintHi()">Click me</button>

方法2：通过JS绑定点击事件（更规范）

推荐把事件绑定逻辑放在JavaScript中，避免内嵌事件处理：

function printHi() {
    console.log("Hi");
}

// ... 保持throttle函数不变 ...

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.querySelector('button');
    // 创建节流实例并绑定
    const throttledPrintHi = throttle(printHi);
    btn.addEventListener('click', throttledPrintHi);
});

对应的HTML简化为：

<button>Click me</button>

这样修改后，所有点击都会复用同一个节流函数实例，shouldWait的状态会被正确保留，节流功能就能按预期工作了。

内容的提问来源于stack exchange，提问作者daCoda