单击时 clearInterval 不起作用

Question

Clearinterval 不是清除间隔集。该程序卡在循环中等待单击。如何在检测到点击后清除间隔？

    var timerID;
    function waitForClick() {
       timerID = setInterval(listen(), 1000);
    }

    function listen() {
       document.getElementById("graphic").onclick = function stopListen() {
          alert("clicky");
          clearInterval(timerID);
       }
    };

    waitForClick();
    return;

Answer 1

其实就是清空区间。我相信问题在于您的逻辑以及您期望发生的事情。让我们稍微分解一下您的代码：

var timerID;
function waitForClick() {
   timerID = setInterval(listen(), 1000);
}

您在这里创建了一个间隔。但是，您的间隔实际上是 listen 的 return 值，因此您实际上是在这样做：

timerID = setInterval(undefined, 1000);

调用 setInterval 时，它会调用 listen（因为 ()），这会将您的 onclick 处理程序绑定到 graphic 元素。这只会绑定一次，否则您会看到多条 alert 消息。当用户随后单击 graphic 元素时，您正在提醒 "clicky"，然后清除您的间隔。

问题似乎是您再次单击该元素并看到警报，并假设间隔仍然是运行。不是 - 您只有一个仍然绑定的事件处理程序！

如果你这样做：

document.getElementById("graphic").onclick = function stopListen() {
    alert('clicky');
    clearInterval(timerID);

    // Clear out event handler
    document.getElementById('graphic').onclick = null;
}

您会看到警报停止（因为我们已明确将 onclick 设置为 null）。

Fiddle: http://jsfiddle.net/k2muguog/

我相信你想做的是这样的：

function waitForClick() {
    if (!timerId) {
        timerId = setInterval(toInterval, 1000);
        document.getElementById('graphic').onclick = function() {
            alert('clicky');
            clearInterval(timerId);
            timerId = null;
        } 
    }
}

function toInterval() {
    // Logic here - BUT NOT THE CLICK HANDLER
    document.getElementById('output').innerHTML = Date.now();
}

http://jsfiddle.net/k2muguog/1/

点击应该提醒然后停止间隔。

单击时 clearInterval 不起作用

clearInterval not working when clicked

javascript

click

setinterval

suspend

clearinterval