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.οnclick=function(){
function show(){
var date=new Date();
time.value=date.toLocaleString();
}
//每隔1s调用show()
setIntervalId=window.setInterval(show,1000);
}
//点击结束按钮
end.οnclick=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.οnclick=function(){
function show(){
var date=new Date();
time.value=date.toLocaleString();
}
//如果已经有定时器了就不创建,没有才创建
if(setIntervalId==undefined)//可以直接写if(!setIntervalId)
{
setIntervalId=window.setInterval(show,1000);
}
}
end.οnclick=function(){
window.clearInterval(setIntervalId);
setIntervalId=undefined;//记得归位!!
}