JavaScript油门常归功能

Question

我正在尝试了解 JavaScript 节流。我根据目前所掌握的知识实现了一个非常基本的节流阀。

const display = (msg) => {
    return msg;
}

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

for(let i=1; i<=5; i++) {
    setTimeout(() => {
        const result = throttleDisplay(display("Hi"), 6000); 
        console.log(result)
    }, i*1000);
}

我的 console.log 正在返回 [Function] 而不是消息 Hi。此外，它返回 [Function] 5 次。在超过 6000 毫秒的限制之前，它不应该忽略下一次调用吗？

非常感谢！

Answer 1

节流方式不同。

首先，您应该将节流函数命名为 throttle，因为它没有与 display 明确关联。然后，您应该调用此 throttle 以获得是特定于 display 的函数。只有这样，您才能在实际用例中使用该辅助功能，即使用计时器。

这里是你的代码更正：

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

const throttleDisplay = throttle(() => console.log("Hi"), 6000);

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

JavaScript油门常归功能

JavaScript Throttle always returning function

javascript

throttling