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的返回值，因此您实际上是这样做的：

timerID = setInterval(undefined, 1000);

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

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

如果你这样做：

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

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

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

小提琴：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不起作用

1 个答案: