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>
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 (返回的是數字id),
多次執(zhí)行開始 setInterval 會多次調用，造成 myVar 只保留最后一次 setInterval 返回的id, 最終造成調用clear函數，只清楚除最后一次。
然而還有其他執(zhí)行的 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>

2017年12月31日 15:33

編輯回答