大家好,欢迎来到IT知识分享网。
window提供了如下4个方法来支持定时器
setlnterval(“code”,interval)、clearInterval(timer):设置、删除定时器。setInterval设置每隔interval毫秒重复执行一次code.
setTimeout(“code”,interval)、clearTimeout(timer):也是设置定时器。推荐使用setInterval()和clearInterval().setTimeout设置在interval毫秒延迟后执行一次code.
如果需要让一段代码、一个javaScript函数以固定频率重复执行,则应该使用setInterval()函数;如果需要让一段代码、一个javaScript函数在指定延迟后仅仅执行一次,则应该使用setTimeout函数。
下面代码示范了一个简单的“动画”效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用定时器</title>
</head>
<body onload="setTime();">
<span id="tm"></span>
<script type="text/javascript">
//定义定时器变量
var timer;
//保存页面运行的起始时间
var cur=new Date().getTime();
var setTime=function()
{
//在tm元素中显示当前时间
document.getElementById("tm").innerHTML=new Date().toLocaleString();
//如果当前时间比起始时间大于60秒,则停止定时器调度
if(new Date().getTime()-cur>60*1000)
{
//清除timer定时器
clearInterval(timer);
}
}
//指定每隔1000毫秒执行setTime()函数一次
timer=window.setInterval("setTime();",1000);
</script>
</body>
</html>
从上面的页面代码中可以看出,setInterval()定时器与java定时器基本相似,只是setInterval()是控制一条或多条代码以指定时间间隔重复执行;而java定时器则是控制事件监听器以指定时间间隔不断被触发。
实际上,上面代码也可改为使用setTimeout()方法来实现,看如下代码。
<html>
<head>
<meta charset="UTF-8">
<title>使用定时器</title>
</head>
<body>
<span id="tm"></span>
<script type="text/javascript">
//定义定时器变量
var timer;
//保存页面运行的起始时间
var cur=new Date.getTime();
var setTime=function()
{
//在tm元素中显示当前时间
document.getElementById("tm").innerHTML=new Date().toLocaleString();
//如果当前时间比起始时间小于等于60秒,则执行定时器的调度
if(new Date().getTime()-cur<=60*1000)
{
//指定延迟1000毫秒后执行setTime()函数
window.setTimeout("setTime();",1000);
}
}
//直接调用setTime()函数
setTime();
</script>
</body>
</html>
上面的代码需要直接调用setTime()函数,一旦setTime()函数执行起来后,在1秒钟内,该函数将会重复执行,因为setTime()函数的最后一行调用了setTimeout(“setTime();”,1000);,该代码指定在1秒钟之后再次执行setTime()函数。
提示:对于setTimeout()和setInterval()定时器的区别,可以举一个现实生活中的例子。假如尤为先生希望周期性地和某位小姐约会,他有两种实现方式:第一种方式是制定一个约会时间表,比如每隔一天就约会一次,这样只需每次到时间进行约会即可;
第二种方式需要先获取第一个约会,然后每次约会结束后再次约定下次约会的时间,这种方式需要每次约会结束后重新约定下次约会的时间,setInterval()定时器采用的是第一种方式;而setTimeout()则采用第二种方式。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/46296.html