javascript - 如果再次调用函数，则取消超时/计时器 --- debounce 函数

Question

我想创建一个启动超时的函数，但如果再次调用该函数，在计时器结束之前，取消原始调用并再次启动计时器。

我想我可以做到:

function setTimer() {
   setTimeout(() => {
      // do something
   }, 3000)
} 

...但这不起作用，每次我运行 setTimer() 时，它都不会取消原始调用。

有人能指出我正确的方向吗？

Answer 1

setTimeout 返回一个 ID，您可以使用 clearTimeout() 来清除超时。因此，您可以在函数开始时清除现有的超时。

例如，如果您继续单击，它将继续重新启动 - 如果您不单击，它将在 2 秒内完成:

let timerID;

function setTimer() {
  console.log("starting/restarting timer")
  clearTimeout(timerID)
  timerID = setTimeout(() => {
    console.log("finished")
  }, 2000)
}

<p onclick="setTimer()">click to start</p>