本文轉(zhuǎn)自：http://hi.baidu.com/fengchuyang/blog/item/396cfe364a53aa350b55a956.html

作者：第二十一次

這兩個(gè)方法都可以用來(lái)實(shí)現(xiàn)在一個(gè)固定時(shí)間段之后去執(zhí)行JavaScript。不過(guò)兩者各有各的應(yīng)用場(chǎng)景。

方 法

實(shí)際上，setTimeout和setInterval的語(yǔ)法相同。它們都有兩個(gè)參數(shù)，一個(gè)是將要執(zhí)行的代碼字符串，還有一個(gè)是以毫秒為單位的時(shí)間間隔，當(dāng)過(guò)了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼。

不過(guò)這兩個(gè)函數(shù)還是有區(qū)別的

setInterval在執(zhí)行完一次代碼之后，經(jīng)過(guò)了那個(gè)固定的時(shí)間間隔，它還會(huì)自動(dòng)重復(fù)執(zhí)行代碼

setTimeout只執(zhí)行一次那段代碼。

雖然表面上看來(lái)setTimeout只能應(yīng)用在on-off方式的動(dòng)作上，不過(guò)可以通過(guò)創(chuàng)建一個(gè)函數(shù)循環(huán)重復(fù)調(diào)用setTimeout，以實(shí)現(xiàn)重復(fù)的操作：

Js代碼

1. showTime();   


2.   


3. function showTime()   


4.   


5. {   


6.   


7.     var today = new Date();   


8.   


9.     alert("The time is: " + today.toString());   


10.   


11.     setTimeout("showTime()", 5000);   


12.   


13. }  

showTime();

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

    setTimeout("showTime()", 5000);

}

一旦調(diào)用了這個(gè)函數(shù)，那么就會(huì)每隔5秒鐘就顯示一次時(shí)間。如果使用setInterval，則相應(yīng)的代碼如下所示：

Js代碼

1. setInterval("showTime()", 5000);   


2.   


3. function showTime()   


4.   


5. {   


6.   


7.     var today = new Date();   


8.   


9.     alert("The time is: " + today.toString());   


10.   


11. }  

setInterval("showTime()", 5000);

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString());

}

這兩種方法可能看起來(lái)非常像，而且顯示的結(jié)果也會(huì)很相似，不過(guò)兩者的最大區(qū)別就是，setTimeout方法不會(huì)每隔5秒鐘就執(zhí)行一次showTime函數(shù)，它是在每次調(diào)用setTimeout后過(guò)5秒鐘再去執(zhí)行showTime函數(shù)。這意味著如果showTime函數(shù)的主體部分需要2秒鐘執(zhí)行完，那么整個(gè)函數(shù)則要每7秒鐘才執(zhí)行一次。而setInterval卻沒(méi)有被自己所調(diào)用的函數(shù)所束縛，它只是簡(jiǎn)單地每隔一定時(shí)間就重復(fù)執(zhí)行一次那個(gè)函數(shù)。

如果要求在每隔一個(gè)固定的時(shí)間間隔后就精確地執(zhí)行某動(dòng)作，那么最好使用setInterval，而如果不想由于連續(xù)調(diào)用產(chǎn)生互相干擾的問(wèn)題，尤其是每次函數(shù)的調(diào)用需要繁重的計(jì)算以及很長(zhǎng)的處理時(shí)間，那么最好使用setTimeout。

函數(shù)指針的使用

兩個(gè)計(jì)時(shí)函數(shù)中的第一個(gè)參數(shù)是一段代碼的字符串，其實(shí)該參數(shù)也可以是一個(gè)函數(shù)指針，不過(guò)Mac下的IE 5對(duì)此不支持。 如果用函數(shù)指針作為setTimeout和setInterval函數(shù)的第二個(gè)參數(shù)，那么它們就可以去執(zhí)行一個(gè)在別處定義的函數(shù)了： Js代碼 setTimeout(showTime, 500);       function showTime()       {           var today = new Date();           alert("The time is: " + today.toString());       }       另外，匿名函數(shù)還可以聲明為內(nèi)聯(lián)函數(shù)：       setTimeout(function(){var today = new Date();            alert("The time is: " + today.toString());}, 500);   setTimeout(showTime, 500); function showTime() { var today = new Date(); alert("The time is: " + today.toString()); } 另外，匿名函數(shù)還可以聲明為內(nèi)聯(lián)函數(shù)： setTimeout(function(){var today = new Date(); alert("The time is: " + today.toString());}, 500);

討 論

如果對(duì)計(jì)時(shí)函數(shù)不加以處理，那么setInterval將會(huì)持續(xù)執(zhí)行相同的代碼，一直到瀏覽器窗口關(guān)閉，或者用戶轉(zhuǎn)到了另外一個(gè)頁(yè)面為止。不過(guò)還是有辦法可以終止setTimeout和setInterval函數(shù)的執(zhí)行。

當(dāng)setInterval調(diào)用執(zhí)行完畢時(shí)，它將返回一個(gè)timer ID，將來(lái)便可以利用該值對(duì)計(jì)時(shí)器進(jìn)行訪問(wèn)，如果將該ID傳遞給clearInterval，便可以終止那段被調(diào)用的過(guò)程代碼的執(zhí)行了，具體實(shí)現(xiàn)如下：

Js代碼

1. var intervalProcess = setInterval("alert('GOAL!')", 3000);   


2.   


3.   


4.   


5. var stopGoalLink = document.getElementById("stopGoalLink");   


6.   


7. attachEventListener(stopGoalLink, "click", stopGoal, false);   


8.   


9.   


10.   


11. function stopGoal()   


12.   


13. {   


14.   


15.     clearInterval(intervalProcess);   


16.   


17. }  

var intervalProcess = setInterval("alert('GOAL!')", 3000);



var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);



function stopGoal()

{

    clearInterval(intervalProcess);

}

 只要點(diǎn)擊了stopGoalLink，不管是什么時(shí)候點(diǎn)擊，intervalProcess都會(huì)被取消掉，以后都不會(huì)再繼續(xù)反復(fù)執(zhí)行intervalProcess。如果在超時(shí)時(shí)間段內(nèi)就取消setTimeout，那么這種終止效果也可以在setTimeout身上實(shí)現(xiàn)，具體實(shí)現(xiàn)如下：

Js代碼

1. var timeoutProcess = setTimeout("alert('GOAL!')", 3000);   


2.   


3.   


4.   


5. var stopGoalLink = document.getElementById("stopGoalLink");   


6.   


7. attachEventListener(stopGoalLink, "click", stopGoal, false);   


8.   


9.   


10.   


11. function stopGoal()   


12.   


13. {   


14.   


15.     clearTimeout(timeoutProcess);   


16.   


17. }  

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);



var stopGoalLink = document.getElementById("stopGoalLink");

attachEventListener(stopGoalLink, "click", stopGoal, false);



function stopGoal()

{

    clearTimeout(timeoutProcess);

}

------------------------------------------------------------------------------------------------

本文轉(zhuǎn)自：http://www.newasp.net/tech/web/7595.html

作者：風(fēng)未起時(shí)

setInterval全面的介紹
setInterval動(dòng)作的作用是在播放動(dòng)畫(huà)的時(shí)，每隔一定時(shí)間就調(diào)用函數(shù)，方法或?qū)ο蟆？梢允褂帽緞?dòng)作更新來(lái)自數(shù)據(jù)庫(kù)的變量或更新時(shí)間顯示。setInterval動(dòng)作的語(yǔ)法格式如下：
setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])
第一種格式是標(biāo)準(zhǔn)動(dòng)作面板中setInterval函數(shù)的默認(rèn)語(yǔ)法，第二種格式是在專家模式動(dòng)作中使用的方法。
其中的參數(shù)function是一個(gè)函數(shù)名或者一個(gè)對(duì)匿名函數(shù)的引用。object參數(shù)指定從Object對(duì)象派生的對(duì)象。methodName制定object參數(shù)中要調(diào)用的方法。interval制定對(duì)function或methodName調(diào)用兩次之間的時(shí)間，單位是毫秒。后面的arg1等是可選的參數(shù)，用于制定傳遞給function或是methodName的參數(shù)。
setInterval它設(shè)置的時(shí)間間隔小于動(dòng)畫(huà)幀速（如每秒10幀，相當(dāng)于100毫秒），則按照盡可能接近interval的時(shí)間間隔調(diào)用函數(shù)。而且必須使用updateAfterEvent動(dòng)作來(lái)確保以足夠的頻率刷新屏幕。如果interval大于動(dòng)畫(huà)幀速，則只用在每次播放頭進(jìn)入某一幀是才調(diào)用，以減小每次刷新屏幕的影響。
下面的例子每隔1秒調(diào)用一次匿名函數(shù)。

setInterval(function(){trace("每隔1秒鐘我就會(huì)顯示一次")},1000);//這里的function(){}是沒(méi)有函數(shù)名

的函數(shù)。成為匿名函數(shù)，后面的1000是時(shí)間間隔，單位是毫秒。
下面的例子為我們展示如何帶參數(shù)運(yùn)行。

Js代碼

1. function show1(){   


2.    trace("每隔1秒我就會(huì)顯示一次");   


3. }   


4. function show2(str){   


5.    trace(str);   


6. }   


7. setInterval(show1,1000);   


8. setInterval(show2,2000,"每隔2秒我就會(huì)顯示一次");  

function show1(){

   trace("每隔1秒我就會(huì)顯示一次");

}

function show2(str){

   trace(str);

}

setInterval(show1,1000);

setInterval(show2,2000,"每隔2秒我就會(huì)顯示一次");

 

上面已經(jīng)將函數(shù)的setInterval方法介紹了。
下面我們將介紹對(duì)象的setInterval方法。
首先，寫(xiě)一個(gè)setInterval在動(dòng)作中調(diào)用對(duì)象的方法的例子，該例子不需要傳遞參數(shù)。

Js代碼

1. myobj=new Object();//創(chuàng)建一個(gè)新的對(duì)象   


2. myobj.interval=function){   


3.    trace("每隔1秒我就會(huì)顯示一次");   


4. }//創(chuàng)建對(duì)象的方法。   


5. setInterval(myobj,"interval",1000);//設(shè)定時(shí)間間隔調(diào)用對(duì)象的方法。   


6.   


7. 接下來(lái)介紹如何傳遞參數(shù)。其實(shí)道理和函數(shù)的傳遞參數(shù)是一樣的。   


8.   


9. myobj=new Object();   


10. myobj.interval-function(str){   


11.    trace(str);   


12. }   


13. setInterval(myobj,"interval",2000," 每隔2秒我就會(huì)顯示一次");  

myobj=new Object();//創(chuàng)建一個(gè)新的對(duì)象

myobj.interval=function){

   trace("每隔1秒我就會(huì)顯示一次");

}//創(chuàng)建對(duì)象的方法。

setInterval(myobj,"interval",1000);//設(shè)定時(shí)間間隔調(diào)用對(duì)象的方法。

接下來(lái)介紹如何傳遞參數(shù)。其實(shí)道理和函數(shù)的傳遞參數(shù)是一樣的。

myobj=new Object();

myobj.interval-function(str){

   trace(str);

}

setInterval(myobj,"interval",2000," 每隔2秒我就會(huì)顯示一次");

 

注意。要調(diào)用為對(duì)象定義的方法時(shí)，必須在專家模式中使用第二種語(yǔ)法格式。
這樣子的話呢，我們來(lái)作一個(gè)動(dòng)態(tài)顯示時(shí)間的畫(huà)面。可以用下面的代碼實(shí)現(xiàn)。

Js代碼

1. setInterval(show,1000);   


2. function show(){   


3.    time=new Date();   


4.    hour=time.getHours();   


5.       minu=time.getMinutes();   


6.       sec=time.get.Seconds();   


7.    datetime=hour+":"+minu+":"+sec;   


8. }//這里的datetime是一個(gè)動(dòng)態(tài)文本框的變量名字。  

setInterval(show,1000);

function show(){

   time=new Date();

   hour=time.getHours();

      minu=time.getMinutes();

      sec=time.get.Seconds();

   datetime=hour+":"+minu+":"+sec;

}//這里的datetime是一個(gè)動(dòng)態(tài)文本框的變量名字。

 

這樣子呢，setInterval這個(gè)方法大家應(yīng)該學(xué)的很好了。現(xiàn)在呢，我們學(xué)習(xí)clearInterval.
clearInterval動(dòng)作的作用是清楚對(duì)setInterval函數(shù)的調(diào)用，它的語(yǔ)法格式如下clearInterval(intervalid);intervalid是調(diào)用setInterval函數(shù)后返回的對(duì)象。
下面舉一個(gè)簡(jiǎn)單的例子。

Js代碼

1. function show(){   


2.    trace("每隔一秒我就會(huì)顯示一次");   


3. }   


4. var sh;   


5. sh=setInterval(show,1000);   


6. clearInterval(sh);  

function show(){

   trace("每隔一秒我就會(huì)顯示一次");

}

var sh;

sh=setInterval(show,1000);

clearInterval(sh);

 ------------------------------------------------------------------------------------------------

本文轉(zhuǎn)自：http://www.7880.com/Info/Article-37287bc0.html

作者：holybozo

 

setInterval很不錯(cuò),可以完全代替onEnterFrame,但是使用起來(lái)卻有很多需要注意的地方

比如要用updateAfterEvent,強(qiáng)制刷屏
還有要記得用clearInterval(id);來(lái)停止掉setInterval,如果要在停止的地方忘記地址了,那是很恐怖的^^"

但是要當(dāng)程序一大,到處都是setInterval的時(shí)候(當(dāng)然這樣的程序也不好),你會(huì)為了找setInterval的id在哪里..而忙呼

注意過(guò)id的人都知道id是一個(gè)number,在你調(diào)用setInterval的時(shí)候會(huì)返回一個(gè)number,而這個(gè)number會(huì)逐加,很像addListener中的_listener數(shù)組的length

那么一個(gè)停掉所有setInterval的笨辦法

Js代碼

1. MAX = 1000;    


2. for(var i=0;i<MAX;i++){    


3. clearInterval(i);    


4. }  

MAX = 1000; 

for(var i=0;i<MAX;i++){ 

clearInterval(i); 

}

 

定義一個(gè)足夠大的數(shù)字,然后慢慢clear,這么做就可以停止掉所有的setInterval了,當(dāng)然如果你使用了超過(guò)1000個(gè)不同的setInterval(- -||)那還會(huì)出掉問(wèn)題
所以最好的辦法

Js代碼

1. var tmpID:Number = setInterval(function(){},10);    


2. while(--tmpID > 0)    


3. clearInterval(tmpID);  

var tmpID:Number = setInterval(function(){},10); 

while(--tmpID > 0) 

clearInterval(tmpID);

 先用setInterval建立一個(gè)空函數(shù),這樣tmpID就會(huì)得到一個(gè)目前所擁有的setInterval的個(gè)數(shù),然后用while循環(huán)一次性搞定就可以了^^"
簡(jiǎn)單吧,這樣,你在哪里用過(guò)setInterval都不要緊,因?yàn)槲蚁雈lash內(nèi)置的setInterval函數(shù),一定有一個(gè)類似addListener中的_listener的數(shù)組,然后返回?cái)?shù)組的長(zhǎng)度
那么強(qiáng)化一下clearAll()方法

Js代碼

1. function clearAll(Void):Void {    


2. // others clear statement    


3. var tmpId:Number = setInterval(function () {}, 10);    


4. while (--tmpId>0) clearInterval(tmpId);    


5. }    


6. ////////////////////////////////////////////////    


7. // 測(cè)試程序    


8. function A(){trace("A");}    


9. function B(){trace("B");}    


10. function C(){trace("C");}    


11. setInterval(A,50);    


12. setInterval(B,50);    


13. setInterval(C,50);    


14.   


15. setInterval(clearAll,1000);    


16.   


17. function clearAll(Void):Void {    


18. var tmpId:Number = setInterval(function () {}, 10);    


19. while (--tmpId>0) clearInterval(tmpId);    


20. }