Question

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

我认为我可以做到：

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

...但是那不起作用，每次我运行setTimer（）时，它都不会取消原始调用。

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

Answer 1

setTimeout返回一个ID，您可以使用该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);
}

如果再次调用该功能，则取消timout /定时器---防反跳功能

3 个答案: