Window对象提供的功能之定时操作

定时操作函数有4个：
window.setInterval / window.clearInterval / window.setTimeout / window. clearTimeout
一、window.setInterval和window.clearInterval一起使用，用法如下：

代码

 1  < html >
 2  < head >
 3  < title > counter </ title >
 4  < script  type ="text/javascript" >
 5  //  定时器
 6  var  timer;
 7 
 8  //  开始计数
 9  function  startCount() {
10     //  timer将保存计数器的ID
11    timer  =  window.setInterval( function () {
12       //  从div中取得当前计数值
13       var  div  =  document.getElementById( " counter " );
14       var  num  =  Number(div.innerHTML);
15 
16       //  计数值加1，更新页面
17      div.innerHTML  =  String(num + 1 );
18    }, 1000 );
19  }
20 
21  //  停止计数
22  function  pause() {
23      window.clearInterval(timer);
24    }
25  </ script >
26  </ head >
27  < body >
28  < div  id ="counter" > 0 </ div >
29  < input  type ="button"  onclick ="startCount()"  value ="start"   />
30  < input  type ="button"  onclick ="pause()"  value ="pause"   />
31 
32  </ br ></ br >
33  < div  id ="content" >
34  window.setInterval 设置定时器，每隔一段时间执行指定的代码，用法如下：
35  windos.setInterval(code,interval); 
36  其中code参数可以是一个函数，也可以是字符串形式的JavaScript代码，
37  interval参数是执行代码的时间间隔，单位是ms。
38  </ br ></ br >
39  setInterval函数在指定代码执行的同时返回一个定时器ID，
40  而clearInterval函数通过这个ID可以清除setInterval函数设置的定时器，
41  使代码不再继续定时执行。
42  </ div >
43  </ body >
44  </ html >

 

二、setTimeout和clearTimeout一起使用，用法如下：

代码

 1  < html >
 2  < head >
 3  < title > counter </ title >
 4  < script  type ="text/javascript" >
 5  //  定时器
 6  var  timer;
 7 
 8  //  开始计数
 9  function  startCount() {
10       var  div  =  document.getElementById( " counter " );
11       var  num  =  Number(div.innerHTML);
12 
13      div.innerHTML  =  String(num + 1 );
14       //  使用setTimeout实现多次定时操作的常见技巧是在startCount函数的最后，
15       //  通过setTimeout函数使startCount函数1s之后再次执行。
16      timer  =  window.setTimeout(startCount, 1000 );
17    }
18 
19  //  停止计数
20  function  pause() {
21      window.clearTimeout(timer);
22    }
23  </ script >
24  </ head >
25  < body >
26  < div  id ="counter" > 0 </ div >
27  < input  type ="button"  onclick ="startCount()"  value ="start"   />
28  < input  type ="button"  onclick ="pause()"  value ="pause"   />
29 
30  </ br ></ br >
31  < div  id ="content" >
32  window.setTimeout 设置定时器，在一段时间之后执行指定的代码，用法如下：
33  window.setTimeout(code,time); 
34  window.setTimeout与window.setInterval的区别在于setTimeout函数指定的代码仅执行一次。
35 
36  </ br ></ br >
37  setTimeout函数在指定代码定时的同时返回一个定时器ID，
38  而clearTimeout函数通过这个ID可以清除setTimeout函数设置的定时器，
39  使代码不再继续定时执行。
40  </ div >
41  </ body >
42  </ html >

 

 

转载于:https://www.cnblogs.com/mikelin/archive/2010/01/31/1660403.html