setInterval()和clearInterval()

setInterval()和clearInterval()是BOM中window对象的两个方法。
setInterval()：设置定时器方法——接收两个参数arg1，arg2；
arg1可以是字符串，改字符串是js代码；也可以是一个函数对象。
arg2是一个整数，单位是ms。
返回值：打开的定时器的ID。
例1：

window.setInterval(“alert(‘Hello world!’)”,1000); //每隔1s弹出Hello world!对话框

例2：

window.setInterval(test,1000);
function test(){alert(“Hello world!”);} //每隔1s弹出Hello world!对话框

clearInterval()：清除定时器方法——接收setInterval()方法的返回值作为对应的参数；
例3：

var id=window.setInterval(“alert(‘Hello world!’)”,1000);
window.clearInterval(id); //弹不出Hello world!窗口

题目：页面有一个文本框，一个开始按钮和一个结束按钮，点击开始按钮时文本框每隔1s显示当前时间，点击结束按钮时停止计时。
例4：（带bug）

body部分：
input type=”text” id=”time” size=”30”
input type=”button” id=”start” value=”开始”
input type=”button” id=”end” value=”结束”
js部分：
//获取文本框对象
var time=document.getElementById(“time”);
//获取开始按钮对象
var start=document.getElementById(“start”);
//获取结束按钮对象
var end=document.getElementById(“end”);
var setIntervalId; //全局变量
//点击开始按钮
start.onclick=function(){
function show(){
var date=new Date();
time.value=date.toLocaleString();
}
//每隔1s调用show()
setIntervalId=window.setInterval(show,1000);
}
//点击结束按钮
end.onclick=function(){
//将开始按钮产生的定时器清除
window.clearInterval(setIntervalId);
}

上面实现乍一看没有问题，但是点击两下开始按钮然后点击一下结束按钮发现无法停止计时。原因：每点击一次开始按钮打开一个定时器，setIntervalId获得的是最后一个定时器的ID，所以点击结束按钮时也只能清除掉最后一个定时器，前面的定时器仍在继续计时。
例5：（无bug）

var time=document.getElementById(“time”);
var start=document.getElementById(“start”);
var end=document.getElementById(“end”);
var setIntervalId;
start.onclick=function(){
function show(){
var date=new Date();
time.value=date.toLocaleString();
}
//如果已经有定时器了就不创建，没有才创建
if(setIntervalId==undefined)//可以直接写if(!setIntervalId)
{
setIntervalId=window.setInterval(show,1000);
}
}
end.onclick=function(){
window.clearInterval(setIntervalId);
setIntervalId=undefined;//记得归位！！
}