以下作為示例：
<!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>