领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

javaScript 使用定时器 js实现定时器功能

nixiaole 2024-11-11 15:27:41 知识剖析 30 ℃

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()则采用第二种方式。

Tags：

猜你喜欢

最近发表
标签列表