JS - 许多 setTimeout 花费的时间比预期更长

Question

我正在处理一些项目，我想知道为什么我延迟了 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 多秒才能降至零。

有什么想法吗？有什么解决办法或者原因吗？

泰:)

Answer 1

你必须使用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>