多次使用setInterval方法导致clearInterval不能成功关闭
以下作为示例：
<!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>
