清除间隔

Question

我正在学习 Javascript，我遇到困难并理解为什么我编辑的一段代码（见下文）不起作用。目的很简单——我想创建一个停止并再次运行时间的按钮。我什至打印了文本以确保我的代码输入了 'if' 和 'else' 语句，但 clearInterval 似乎不起作用。非常感谢帮助！

(*原始代码属于 w3schools，我添加了 "loop function" 只是为了看看它是否会起作用，但它不起作用 ;( )

这是代码：

<!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>

<p id="demo"></p>

<button onclick="checkTime()">Stop time/Start time again</button>

<p id="test"></p>

<script>
var myCounter = 0;
var myVar = setInterval(myTimer ,1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

function checkTime() {
    myCounter += 1;
    if (myCounter == 1) {
        clearInterval(myVar);
        document.getElementById("test").innerHTML = "ok";
    } else {
        var myVar = setInterval(myTimer ,1000);
        myCounter = 0;
        document.getElementById("test").innerHTML = "clicked again";
    }
}
</script>

</body>
</html>

谢谢！

Answer 1

从第二个 var myVar = setInterval...

中删除 var

第二个是你的函数的范围，"overrides"第一个...

function checkTime() {
    myCounter += 1;
    if (myCounter == 1) {
        clearInterval(myVar);
        document.getElementById("test").innerHTML = "ok";
    } else {
        myVar = setInterval(myTimer ,1000);
        myCounter = 0;
        document.getElementById("test").innerHTML = "clicked again";
    }
}

Answer 2

只是快速浏览了您的代码，但我注意到您正在重新声明 myVar 变量，由于 javascript 称为 hoisting.

尝试以下...

<script>
var myCounter = 0;
var myVar = setInterval(myTimer ,1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

function checkTime() {
    myCounter += 1;
    if (myCounter == 1) {
        clearInterval(myVar);
        document.getElementById("test").innerHTML = "ok";
    } else {
        myVar = setInterval(myTimer ,1000);
        myCounter = 0;
        document.getElementById("test").innerHTML = "clicked again";
    }
}
</script>

清除间隔

Clearing an interval

javascript

intervals