javascript定时器理解

window对象提供了两个方法来实现定时器的效果，

分别是   window.setTimeout()  : 可以使一段代码在指定时间后运行

　　　　window.setInterval()   ：可以使一段代码每过指定时间就运行一次

其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下： 
window.setTimeout(expression,milliseconds); 
window.setInterval(expression,milliseconds);

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

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

一般不用setInterval，而用setTimeout的延时递归来代替interval。

setInterval会产生回调堆积，特别是时间很短的时候。  

下面使用 setTimeout举例，定义页面固定时间刷新页面 ，其方法使用了 模块模式，包含了定义延时以及清除延时方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>settimeout</title>
</head>
<body>
<button type="button" value="开始"  id='timeOutT' onclick="Timeout.time()" disabled="disabled">开始</button>
<button type="button" value="关闭"  id='timeOutF' onclick="Timeout.timeOutF()">关闭</button>
</body>
</html>
<script language="JavaScript" type="text/javascript"> 

var Timeout = (function(){//使用模块模式定义此方法
    var timeOutVal,
        tid; 
    return{
        time : function(){ 
            window.location.reload();
        },
         
        timeOutT : function(){  
            //timeOutVal=true;
            //Method(); 
            //if(timeOutVal)
            tid=setTimeout(this.time,1000); //time是指本身,延时递归调用自己,1000为间隔调用时间,单位毫秒  
        },
        timeOutF : function(){ 
            document.getElementById("timeOutT").removeAttribute('disabled'); 
            timeOutVal=false; 
            clearTimeout(tid); 
        }
    }                             
}()); 
Timeout.timeOutT();
 
</script>

 

posted @ 2016-03-24 11:38  Gaochunling  阅读(208)  评论(0)    收藏  举报