单击时clearInterval不起作用

clearInterval not working when clicked

本文关键字：不起作用 clearInterval 单击      更新时间：2023-09-26

Clearinterval未清除间隔集。程序在等待点击时一直处于循环状态。一旦它检测到点击，我该如何使其清除间隔？

    var timerID;
    function waitForClick() {
       timerID = setInterval(listen(), 1000);
    }
    function listen() {
       document.getElementById("graphic").onclick = function stopListen() {
          alert("clicky");
          clearInterval(timerID);
       }
    };
    waitForClick();
    return;

实际上，它正在清除间隔。我相信问题出在你的逻辑和你期望发生的事情上。让我们来分解一下你的代码：

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

在这里，您创建了一个间隔。然而，您的间隔实际上是listen的返回值，所以您基本上是这样做的：

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/

单击应发出警报，然后停止间隔。

相关文章：