多次使用setInterval方法導致clearInterval不能成功關閉
阿新 • • 發佈：2020-09-11
以下作為示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>顯示網頁時鐘</title> </head> <body> <script> function displayTime(){ var time = new Date(); var strTime = time.toLocaleString(); document.getElementById("timeDiv").innerHTML = strTime; } function start(){ s = window.setInterval("displayTime()",1000); } function stop(){ window.clearInterval(s); } </script> <input type="button" value="顯示系統時間" onclick="start()" /> <input type="button" value="停止顯示系統時間" onclick="stop()" /> <div id="timeDiv"></div> </body> </html>
在多次點選顯示系統時間按鈕的情況下，再點選停止顯示系統時間，這時發現無法停止。
原因
1、多次點選顯示系統時間按鈕的話，會導致setInterval的ID值不斷變化，每點一次ID值加1。
2、這樣clearInterval獲取到的ID值就只是當前的ID值。
3、之前的對應ID值發生的事件就無法停止。多次點選沒有把之前的任務覆蓋，而是增加了。
解決辦法
加一個flag標記，使得setInterval只能執行一次，並且必須在clearInterval執行後才能執行第二次。形成相互約束。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>顯示網頁時鐘</title> </head> <body> <script> //flag標記 var flag = true; function displayTime(){ var time = new Date(); var strTime = time.toLocaleString(); document.getElementById("timeDiv").innerHTML = strTime; } function start(){ //設定許可權flag，使start、stop都只能執行一次 if(flag){ s = window.setInterval("displayTime()",1000); flag = false; } } function stop(){ if(!flag){ window.clearInterval(s); flag = true; } } </script> <input type="button" value="顯示系統時間" onclick="start()" /> <input type="button" value="停止顯示系統時間" onclick="stop()" /> <div id="timeDiv"></div> </body> </html>