javaScript 使用定时器

javaScript 使用定时器window提供了如下4个方法来支持定时器setlnterval("code",interval)、clearInterva

大家好,欢迎来到IT知识分享网。

window提供了如下4个方法来支持定时器

javaScript 使用定时器

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

(0)
上一篇 2024-04-22 19:15
下一篇 2024-04-22 20:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信