我的油门功能没有等待限制时间

Question

我正在学习节流，但我遇到了一个问题，即我的节流方法没有等待 limit 运行时间。

const display = (msg) => {
    console.log(msg). // I know this function does not do anything, but I'm trying to understand how I can call a function inside my throttle.
}

const throttle = (func, limit) => {
    let flag = true;
    return function() {
        if(flag) {
            func.apply(this, arguments);
            flag = false;
            setTimeout(() => flag = true, limit);
        }
    }
}

const throttleDisplay = () => {
    return throttle(display("Hi"), 6000);
}

for(let i=1; i<=10; i++) {
    setTimeout(throttleDisplay, i*1000);
}

我的输出是“Hi”10 次，但我不应该有 10 次 Hi，因为我在一个呼叫和另一个呼叫之间有 6 秒的等待时间。

Answer 1

throttle 将 callback 作为参数，但您会立即调用 display。

const throttleDisplay = () => {
    return throttle(display("Hi"), 6000);
}

完全等价于

const throttleDisplay = () => {
    const result = display("Hi");
    return throttle(result, 6000);
}

看到问题了吗？

您需要一个使用您想要的参数调用display 的函数：

const throttleDisplay = () => {
    return throttle(() => display("Hi"), 6000);
}