夏日博客

A-A+

js计时器之setTimeOut和setInterval用法

2016年10月13日 前端设计 暂无评论 阅读 5 views 次

本文章利用js中的setInterval()函数来实现一个简单的js计时器程序，有需要学习做计时器的朋友可参考参考。

从根本上来说，理解计时器如何工作很重要。通常情况下，计时器的行为并不直观，因为它在一个单独的线程中，让我们从三个函数的测试开始，对于每一个函数我们都有机会构建和控制计时器。

JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象

setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象

clearInterval(对象) 清除已设置的setInterval对象

使用定时器实现JavaScript的延期执行或重复执行

var id = setTimeout(fn,delay)；启动一个计时器，它将在延迟时间之后调用特定的函数，该函数返回一个唯一的ID，利用这个ID计时器在稍后的时间里被取消；

var id = setInterval(fn,delay)；与setTimeout相似，但它不断的调用函数（每隔一定延迟时间）直到它被取消；

clearInterval(id)，clearTimeout(id)；接受计时器的 ID（由上述任意一个函数返回）并停止调用计时器。

例1,代码如下:

  1. <script language="JavaScript" type="text/javascript">   
  2. <!--   
  3. function hello(){   
  4. alert("hello");   
  5. }   
  6. window.setTimeout(hello,5000);   
  7. //-->   
  8. </script>   

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为：

window.setTimeout("hello()",5000);

例2,代码如下:

  1. <script>  
  2. function Timer(maxtime,id,callback){  
  3. //maxtime：时间，单位s  
  4. //id：显示计时器信息的容器id  
  5. //callback：计时器结束回调  
  6.     var tmp  
  7.     function CountDown() {  
  8.         if (maxtime >= 0) {  
  9.             hours = Math.floor(maxtime / (60 * 60));  
  10.             tmp = maxtime - hours * 60 * 60 ;  
  11.             minutes = Math.floor(tmp / (60 ));  
  12.             tmp = tmp - minutes * 60;  
  13.             seconds = tmp  
  14.             msg = "距离结束还有" + hours + "小时" + minutes + "分" + seconds + "秒"  
  15.             document.getElementById(id).innerHTML = msg;  
  16.             maxtime -= 1;  
  17.         }  
  18.         else {  
  19.             clearInterval(timer);  
  20.             if(typeof callback=="function")callback();//执行倒计时完成后的回调  
  21.         }  
  22.     }  
  23.     var timer = setInterval(function(){CountDown()}, 1000);  
  24. }  
  25. window.onload=function(){  
  26.   new Timer(30,'timer1',function(){document.getElementById("timer1").innerHTML = "计时器1完成";});  
  27.   new Timer(40,'timer2',function(){document.getElementById("timer2").innerHTML = "计时器2完成";});  
  28.   new Timer(50,'timer3',function(){document.getElementById("timer3").innerHTML = "计时器3完成";});  
  29. }  
  30. </script>  
  31. <div id="timer1" style="color:red; font-size:28px"></div>   
  32. <div id="timer2" style="color:red; font-size:28px"></div>   
  33. <div id="timer3" style="color:red; font-size:28px"></div>  

例2才是我们最终要的记时器了前面只是简单的讲述一下计时器的实现方法与原因。

标签：

给我留言