這兩個(gè)方法都可以用來實(shí)現(xiàn)在一個(gè)固定時(shí)間段之后去執(zhí)行JavaScript。不過兩者各有各的應(yīng)用場(chǎng)景。
實(shí)際上,setTimeout和setInterval的語法相同。它們都有兩個(gè)參數(shù),一個(gè)是將要執(zhí)行的代碼字符串,還有一個(gè)是以毫秒為單位的時(shí)間間隔,當(dāng)過了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼。
不過這兩個(gè)函數(shù)還是有區(qū)別的,setInterval在執(zhí)行完一次代碼之后,經(jīng)過了那個(gè)固定的時(shí)間間隔,它還會(huì)自動(dòng)重復(fù)執(zhí)行代碼,而setTimeout只執(zhí)行一次那段代碼。
雖然表面上看來setTimeout只能應(yīng)用在on-off方式的動(dòng)作上,不過可以通過創(chuàng)建一個(gè)函數(shù)循環(huán)重復(fù)調(diào)用setTimeout,以實(shí)現(xiàn)重復(fù)的操作:
?
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)的代碼如下所示:
?
setInterval(
"
showTime()
"
,?
5000
);

function?showTime()


{

????var?today?
=
?
new
?Date();

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

}
?
這兩種方法可能看起來非常像,而且顯示的結(jié)果也會(huì)很相似,不過兩者的最大區(qū)別就是,setTimeout方法不會(huì)每隔5秒鐘就執(zhí)行一次showTime函數(shù),它是在每次調(diào)用setTimeout后過5秒鐘再去執(zhí)行showTime函數(shù)。這意味著如果showTime函數(shù)的主體部分需要2秒鐘執(zhí)行完,那么整個(gè)函數(shù)則要每7秒鐘才執(zhí)行一次。而setInterval卻沒有被自己所調(diào)用的函數(shù)所束縛,它只是簡(jiǎn)單地每隔一定時(shí)間就重復(fù)執(zhí)行一次那個(gè)函數(shù)。
如果要求在每隔一個(gè)固定的時(shí)間間隔后就精確地執(zhí)行某動(dòng)作,那么最好使用setInterval,而如果不想由于連續(xù)調(diào)用產(chǎn)生互相干擾的問題,尤其是每次函數(shù)的調(diào)用需要繁重的計(jì)算以及很長(zhǎng)的處理時(shí)間,那么最好使用setTimeout。
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è)面為止。不過還是有辦法可以終止setTimeout和setInterval函數(shù)的執(zhí)行。
當(dāng)setInterval調(diào)用執(zhí)行完畢時(shí),它將返回一個(gè)timer ID,將來便可以利用該值對(duì)計(jì)時(shí)器進(jìn)行訪問,如果將該ID傳遞給clearInterval,便可以終止那段被調(diào)用的過程代碼的執(zhí)行了,具體實(shí)現(xiàn)如下:
?
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)如下:
?
var?timeoutProcess?
=
?setTimeout(
"
alert('GOAL!')
"
,?
3000
);
var?stopGoalLink?
=
?document.getElementById(
"
stopGoalLink
"
);
attachEventListener(stopGoalLink,?
"
click
"
,?stopGoal,?
false
);

function?stopGoal()
{
????clearTimeout(timeoutProcess);
}
posted on 2009-05-12 18:02
JasonChou 閱讀(242)
評(píng)論(0) 編輯 收藏 所屬分類:
html