JavaScript两种定时器详解

时间:2022-12-22 00:09:04

setTimeout

1、var timerId=setTimeout(code,millisec)方法用于在指定的毫秒数后调用函数或者计算表达式。其中timerId表setTimeout(code,millisec)的返回值,code表示要执行的代码,我们可以直接传入一个已经定义好的函数,millsec表示执行code前需要等待的时间,以毫秒为单位。 2、setTimeout(code,millsec)这个函数只会执行一次,如果需要多次调用,可以使用setInterval()函数,也可以让code再调用自身的setTimeout()函数。 3、当一个定义器函数启动了以后,我们可以通过返回值timerId来中断这个定时器,其语法是:clearTimeout(timerId),一旦定时器被中断了,这个定义不能被重新恢复执行,只有新开的一个定义器。 4、使用setTimeout()函数来实现在5秒后跳出警告框alert:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>setTimeout</title>
<script type="text/javascript">
window.onload=function(){
var oSuspend=document.getElementById('suspend');
/*setTimeout()调用函数有两种写法,注意这里两种方式为调用函数传入参数的方式*/
//var timerId=setTimeout(alertMsg,5000,new Date());
//var timerId=setTimeout("alertMsg(new Date())",5000);
/*使用匿名函数方式*/
var timerId=setTimeout(function(){//开启定时器
alertMsg(new Date());
},5000);
oSuspend.onclick=function(){//中断定时器
clearInterval(timerId);
}
}
function alertMsg(obj){
alert(obj);
}
</script>
</head>
<body>
<button id="suspend">中断定时器</button>
</body>
</html>

setInterval

1、var timerId=setInterval(code,millsec)方法可执照指定的周期(以毫秒计)来调用函数或者计算表达式,其中timerId表示setInterval(code,millsec)的返回值,code表示要执行的代码,可以直接传入一个已经定义好的函数,millsec表示函数执行的周期,以毫秒为单位。 2、setInterval(code,millsec)方法会以millsec为周期不停的调用函数,直到clearInterval()被调用或者窗口被关闭。 3、当setInterval(code,millsec),我们可以通过返回值timerId来中断这个函数,其语法是:clearInterval(timerId)。 4、用setInterval()函数来实时更新网页时间例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>setInterval</title>
<script type="text/javascript">
window.onload=function(){
var oTime=document.getElementById('time');
var oSuspend=document.getElementById('suspend');
var oResume=document.getElementById('resume');
createTime(oTime);//初始化时间
var timerId=setInterval(function(){//使用定时器刷新时间
createTime(oTime);
},1000);
oSuspend.onclick=function(){//中断定时器
clearInterval(timerId);
}
oResume.onclick=function(){//重新打开定时器
timerId=setInterval(function(){//使用定时器刷新时间
createTime(oTime);
},1000);
}
}
function createTime(obj){//产生当前时间
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
obj.innerHTML=transfer(hours)+":"+transfer(minutes)+":"+transfer(seconds);
}
function transfer(n){//格式化数据
if(n<10){
return "0"+n;
}else{
return n+"";
}
}
</script>
</head>
<body>
<div>
<div id="time"></div>
<button id="suspend">中断</button> <button id="resume">重新打开定时器</button>
</div>
</body>
</html>