我正在处理一些项目,我想知道为什么我延迟了 setTimeout,而花费的时间比预期要长得多......
为了提供上下文,代码会对某些触发器做出反应,并且函数会触发很多次(可能每秒 15 次)。在此函数上,我增加一个全局值,然后执行 3 秒的 setTimeout 并将全局值减少相同的量(预计每次超时应在最大 3 秒后返回到 0)
但显然他们的工作方式与我的预期不同,而且它们会及时堆叠......因此全局价值会慢慢减少。
代码:
//trigger method... just fires like a button press in html
register("soundPlay", () => {
addCount();
}).setCriteria("random.successful_hit");
var count = 0;
function addCount() {
console.log("triggered");
count+= 10;
setTimeout(function () {
count-= 10;
}, 3000);
}
这是我停止触发后函数的结果,堆栈显示在括号中。每 1/20 秒显示一次。所以从我停下来的那一刻起,需要 30 多秒才能降至零。
有什么想法吗?有什么解决办法或者原因吗?
泰:)
你必须使用debounce才能得到你想要的效果
var count = 0;
b.onclick = addCount
const clearCount = debounce(() => {
setTimeout(function() {
count = 0;
console.log(count)
}, 3000);
}, 500)
function addCount() {
count += 10;
console.log(count)
clearCount()
}
function debounce(callback, wait) {
let timeoutId = null;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
callback(...args);
}, wait);
};
}
<button id="b">add count</button>