定时器分为延时定时器和间歇定时器。
1.延时定时器 setTimeout
setTimeout有两个参数,参数1是回调函数,参数2是延迟的时间(单位是毫秒)。工作一次,但需要清除,为下一次做准备。清除定时器,否则会一直工作。
<input type="button" id="btn1" value="点击">
<input type="button" id="btn2" value="清除">
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
//b赋值为空
var b=null;
btn1.οnclick=function(){
//定时器赋给b
b=setTimeout(function(){
alert("hi");
},3000);
}
btn2.οnclick=function(){
clearTimeout(b);//清除定时器
}
2.间歇定时器 setInterval
setInterval有两个参数,参数1是回调函数,参数2是延迟的时间(单位是毫秒)。会一直工作,直到清除为止。
<input type="button" id="btn1" value="点击">
<input type="button" id="btn2" value="清除">
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
//b赋值为空
var b=null;
btn1.οnclick=function(){
//定时器赋给b
b=setInterval(function(){
console.log("hi");
},3000);
}
btn2.οnclick=function(){
clearTimeout(b);//清除定时器
}
3.短信验证demo
<input type="text">
<input type="button" id="btn2" value="点击获取验证码">
var num=4;
var btn2=document.getElementById("btn2");
//b赋值为空
var b=null;
btn2.οnclick=function(){
this.disabled=true;
//定时器赋给b
b=setInterval(function(){
//在定时器中,this指向window
num--;
btn2.value=num+"秒后再次发送";
if(num==0){
clearInterval(b);
btn2.value="点击获取验证码";
btn2.disabled=false;
num=4;
}
},1000);
}