JavaScript 定时器

Question

我想在点击发生后调用 setTimeout()。

如果用户在 300ms 过去之前再次点击，我想停止那个计时器，触发另一个函数并重新启动原来的计时器。

我知道 setTimeout() 但我不确定如何解决这个问题。

Answer 1

JavaScript:

myTimeout = setTimeout(function() {
                // this will fire in 300ms if you don't perform some other action!
          },300); 

document.getElementById("button").click = function() {
   // button clicked, stop the timeout
   clearTimeout(myTimeout);
};

HTML:

<button id="button">Click me</button>

setTimeout 启动 300ms 定时器。单击处理程序将单击事件绑定(bind)到页面上的按钮，单击该按钮时，将使用 clearTimeout 停止计时器。

当您调用 setTimeout 时，将其分配给一个变量。然后您可以使用该变量稍后通过调用 clearTimeout 来停止计时器。

您可以对任何事件使用相同的技术，例如按键、鼠标悬停事件、按钮或 DOM 元素点击等等。

请注意，相同的过程也适用于 setInterval。

myInterval = setInterval(function() {
               // do stuff every 300ms
             },300);

clearInterval(myInterval);  // stop the interval

使用 addEventListener:

function start() {
    window.addEventListener("click", function() { 
        timeout = setTimeout(function() {
            // do stuff after 300ms after the first click
            clearTimeout(timeout);
            start();
        }, 300)
    }, false);
}

上面应该在页面上绑定(bind)一个全局点击监听器，并在点击后递归地清除并重新启动计时器。如果没有点击，监听器会停止，但这应该让您开始。