JavaScript定时器

Windows对象包含了4个定时器方法，说明如下表所示：

Windows对象定时器方法列表
方法	说明
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照在指定的周期（以毫秒计）来调用函数或计算表达式
clearTimeout()	取消setTimeout()方法生成的定时器对象
clearInterval()	取消setInterval()方法生成的定时器对象

1. setTimeout()方法

setTimeout()方法在指定的时间段后执行的代码。其中拥有两个参数值，分别是code和delay，其中参数code表示要延迟执行的代码，可以包含多个语句，语句之间要用分号进行分隔，delay表示要延迟的时间，以毫秒为单位计时。

示例：当鼠标经过段落文本时时显示 “段落文本”。

          var p=document.getElementsByTagName("p")[0];
          p.onmouseover=function(){
              setTimeout(function(){
                  alert(“段落文本”);
              },1000);
          }

也可将JavaScript代码封装在函数体内，然后引用函数作为参数传递给setTimeout()方法，这样就可以避免了传递代码众多而造成不必要的麻烦。

示例：如何为集合中每一个元素绑定延迟事件。

         var o=document.getElementsByTagName("body")[0].childNodes;//获取body元素下所用子元素
         for(var i=0;i<o.length;i++){
             o[i].onmouseover=function(i){
                 return function(){
                     f(o[i]);   //将js代码封装在一个函数体中作为参数传给setTimeout
                 }
             }(i);
         }
         function f(o){
             var out=setTimeout(function(){
                 alert(o.tagName)
             },500);
         }

这样就可以当鼠标经过body元素下的子元素时，延迟半秒后弹出该元素的名称。

2. clearTimeout()方法

clearTimeout()方法表示在特定的情况下清除要延迟的代码，这样就可以避免了函数之间的互相干扰。

列如：当鼠标停留在某个元素时，半秒后才会弹出提示信息，一旦鼠标提前离开该元素，就立即清除前面定义的延迟处理事件函数。

         var o=document.getElementsByTagName("body")[0].childNodes;
         for(var i=0;i<o.length;i++){
             o[i].onmouseover=function(i){
                 return function(){
                     f(o[i]);   
                 }
             }(i);
             o[i].onmouseout=function(i){
                 return function(){
                     clearTimeout(o[i].out);//清除延迟处理的函数
                 }
             }(i);
         }
         function f(o){
             o.out=setTimeout(function(){
                 alert(o.tagName)
             },500);
         }

也可以这这样使用clearTimeout()方法：

示例：在文本框中按秒针速度显示递增的数字，当循环10次后调用clearTimeout()方法清除对延迟代码的执行，并弹出提示信息。

         <body>
         <input type="text" />
         </body>
         <script>    
         var t=document.getElementsByTagName("input")[0];
         var i=1;
         function f(){
             var out=setTimeout(
                 function(){
                     t.value=i++;
                     f();
                 },1000);
                 if(i>10){
                     clearTimeout(out);
                     alert("时间到");
                 }
         }   
         f();
         </script>

3. setInterval()方法

setInterval()方法的用法和setTimeout()方法的用法基本相同，其中参数为code和interval，只是参数code表示要周期性执行的代码，参数interva表示周期的时间间隔，也是以毫秒为单位。

如上的示例：在文本框中按秒针速度显示递增的数字，当循环10次后调用clearTimeout()方法清除对延迟代码的执行，并弹出提示信息。

            //setInterval()用法和setTimeout()用法相同，只是code改为了周期性，即每个多久执行一次代码
         var t=document.getElementsByTagName("input")[0];
         var i=1;
         var out=setInterval(f,1000)；//定义周期性执行的函数
         function f(){
             t.value=i++;
         　　　　if(i>10){
             　　clearTimeout(out);
             　　alert("时间到");
             }
         }

我的第一篇博客，还望大神们多多指教。

JavaScript定时器

相关推荐