如果再次调用函数则取消超时/定时器---去抖动函数

Question

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

我认为我可以做到：

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

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

谁能指出我正确的方向？

Answer 1

setTimeout returns 一个 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>

Answer 2

你想做的是取消现有的超时并重新开始？您可以使用 cleartimeout

let timeoutFunctionVar = null;

const setTimeoutFunction = () => {
    clearTimeout(timeoutFunctionVar)
    timeoutFunctionVar = setTimeout(() => {
        // do something
    }, 3000)
};

setTimeoutFunction()

所以每次调用 setTimeoutFunction() 时，之前的超时都会重置

Answer 3

我觉得这个问题经常被问到，尤其是对于由关键事件触发的搜索，但我找不到任何问题。

基本思想是让 timeout id 保持状态，因此您可以在后续调用 TO setter:

时清除它

const MS_IN_SEC = 1000;

let old_timeout;

function TO_setter(searchString) {
    if (old_timeout)
        window.clearTimeout(old_timeout);

    old_timeout = window.setTimeout(search, 2 * MS_IN_SEC, searchString);
}

function search(s) {
    console.log('search for: %s', s);
}

如果再次调用函数则取消超时/定时器---去抖动函数

Cancel timout / timer if function called again --- debounce function

javascript

timer

debounce