如果再次调用函数,则取消timout/timer ---去抖功能

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>