setInterval多次点击后无法停止

Leo__7

2439

单次点击开始时钟，程序正常运行，点击停止时钟，时钟立刻停止；多次点击开始时钟后，程序运行，点击停止时钟，程序有响应，但是时钟未停止。请问这是什么情况？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button id='myStopFunction'>停止时钟</button>
<button onclick="mvToLft()">开始时钟</button>
<script>
function mvToLft(){
    var myVar=setInterval(function(){myTimer()},1000);
    document.getElementById('myStopFunction').onclick = function(){
        clearInterval(myVar);
        console.log(1);
    };
}
function myTimer(){
    console.log(0);
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>

setinterval

阅读 7.4k

5 个回答

方糖先生

✓ 已被采纳

// 你写的代码太萌，看看这符合要求吗，建议看一下函数闭包和 setInterval (返回的是数字id),
多次执行开始 setInterval 会多次调用，造成 myVar 只保留最后一次 setInterval 返回的id, 最终造成调用clear函数，只清楚除最后一次。
然而还有其他执行的 setInterval 队列。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>页面上显示时钟：</p>
<p id="demo"></p>
<button id='myStopFunction'>停止时钟</button>
<button onclick="mvToLft()">开始时钟</button>
<script>
var myVar = null
function mvToLft(){
    myVar !== null && clearInterval(myVar)
    myVar = setInterval(function(){myTimer()},1000);
    document.getElementById('myStopFunction').onclick = function(){
        clearInterval(myVar);
    };
}
function myTimer(){
    console.log(0);
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
</script>
</body>
</html>