基于JavaScript的定時事件實現(xiàn)方法的研究

韓蒙蒙 李欣

摘 要：在開發(fā)動態(tài)網(wǎng)頁和網(wǎng)絡(luò)游戲的腳本編寫過程中，經(jīng)常涉及到間隔循環(huán)執(zhí)行某些任務(wù)的情況，我們通常稱為定時事件。setInterval（）和setTimeout（）兩個方法都可以用于實現(xiàn)定時事件。經(jīng)過深入研究這兩種定時事件方法，從使用方法到實現(xiàn)效果，對二者進行了分析比較，得出了它們的異同點及適用場景。

關(guān)鍵詞：setInterval；setTimeout；定時事件

一、前言

JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型、基于對象的語言，并且它內(nèi)置支持類型。目前經(jīng)常被用于Web應(yīng)用開發(fā)中，比如在網(wǎng)頁中加入一些動態(tài)的功能，為用戶提供更流暢美觀的瀏覽效果。在瀏覽動態(tài)網(wǎng)頁的過程中，我們會看到圖片自動切換，這就用到了JavaScript中的定時事件技術(shù)來實現(xiàn)頁面定時自動完成一些操作。

二、定時事件功能通過setInterval（）方法實現(xiàn)

通過setInterval（）方法可以實現(xiàn)定時事件功能，它的語法如下：

setInterval（參數(shù)1，參數(shù)2）；

其中，參數(shù)1是需要執(zhí)行的代碼字符串，可以是一個函數(shù)名；參數(shù)2表示的是時間間隔，是以毫秒為單位的，當過了參數(shù)2的時間段之后就會執(zhí)行那段相應(yīng)的代碼，而且以時間間隔參數(shù)2為周期，不停的重復(fù)執(zhí)行代碼。

在下面的例1中，我們通過setInterval（）方法來實現(xiàn)每隔1秒鐘重復(fù)彈出窗口的效果，執(zhí)行代碼之后提示框?qū)扛?秒自動彈出，直到瀏覽器窗口關(guān)閉，或者轉(zhuǎn)到了另外一個頁面為止。例1代碼如下：

functiontimedMsg（）{

var a=setInterval（“alert（‘1 seconds?。?，1000）

}

三、定時事件功能通過setTimeout（）方法實現(xiàn)

要實現(xiàn)定時事件功能，除了setInterval（）方法，我們還可以用setTimeout（）方法。它的語法如下：

setTimeout（參數(shù)1，參數(shù)2）；

這兩個參數(shù)的含義和setInterval（）方法中的兩個參數(shù)含義一樣，實現(xiàn)的功能也是當過了參數(shù)2的時間段之后就會執(zhí)行參數(shù)1那段相應(yīng)的代碼，但是setTimeout（）方法不循環(huán)執(zhí)行，只執(zhí)行一次。

在下面的例2中，點擊按鈕1秒鐘后會彈出一個提示框，只彈出一次，不周期性重復(fù)彈出。例2代碼如下：

functiontimedMsg（）{

var a=setTimeout（“alert（‘1 seconds?。?，1000）

}

所以，要想用setTimeout（）方法來定期重復(fù)的執(zhí)行參數(shù)1的代碼，這就需要在執(zhí)行的代碼中再調(diào)用自己，即使用遞歸函數(shù)。

接下來，我們使用setTimeout（）方法來實現(xiàn)例1中每隔1秒鐘重復(fù)彈出窗口的效果，也就是提示框先彈出一次，之后每隔1秒自動彈出，直到瀏覽器窗口關(guān)閉，或者轉(zhuǎn)到了另外一個頁面為止。代碼如下：

functiontimedMsg（）{

alert（‘1seconds?。?；

setTimeout（“timedMsg（）”，1000）；

}

四、setInterval（）方法和setTimeout（）方法的相同之處

setTimeout（）方法和setInterval（）方法的語法是一樣的。它們都包含兩個參數(shù)，setInterval（參數(shù)1，參數(shù)2）和setTimeout（參數(shù)1，參數(shù)2）中，參數(shù)1都是需要執(zhí)行的代碼字符串，指定了在第二個參數(shù)指定的時間間隔中做些什么，可以是一個函數(shù)名；參數(shù)2都表示的是時間間隔，是以毫秒為單位的，當過了參數(shù)2的時間段之后就會執(zhí)行那段相應(yīng)的代碼。

1.用setInterval（）實現(xiàn)定時事件

vartev；

functioninit（）{

tev = setInterval（increase，1000）；

}

function increase（）{

document.f.sec.value = String（1+Number（document.f.sec.value））；

}

function stop（）{

clearInterval（tev）；

}

2.用setTimeout （）實現(xiàn)定時事件

vartev；

functioninit（）{

document.form.sec.value=String（1+Number（document.form.sec.value））；

tev1 = setTimeout（“init（）”，1000）；

}

function stop（）{

clearTimeout（tev）；

}

五、setInterval（）與setTimeout（）兩種方法的不同之處

setTimeout（參數(shù)1，參數(shù)2）方法與setInterval（參數(shù)1，參數(shù)2）方法都可以作為實現(xiàn)定時事件的方法，但最后實現(xiàn)的效果卻不太相同。其中，setInterval（）方法是在執(zhí)行完參數(shù)1事件的代碼之后，經(jīng)過了參數(shù)2所設(shè)定的時間間隔之后，還會自動的重復(fù)執(zhí)行參數(shù)1所包含事件的代碼，即每隔一定時間間隔去反復(fù)執(zhí)行一個事件；而setTimeout（）方法在經(jīng)過參數(shù)2所設(shè)定的時間間隔之后，只執(zhí)行一次那段代碼，即只執(zhí)行一次事件。但可以通過創(chuàng)建重復(fù)循環(huán)的方法來調(diào)用setTimeout（）的函數(shù)，來實現(xiàn)自動重復(fù)執(zhí)行事件的操作。

六、總結(jié)

通過上述的分析我們可以總結(jié)：setTimeout（）方法與setInterval（）方法都可以用來實現(xiàn)定時事件的效果，但是使用的方法不盡相同。其中，setTimeout（）方法需要通過在參數(shù)中調(diào)用自身才能實現(xiàn)連續(xù)不斷的循環(huán)的效果，而setInterval（）方法則不需要調(diào)用自身就可以實現(xiàn)連續(xù)循環(huán)。而且，這兩種方法實現(xiàn)的定時事件的效果也有一定的差別，我們要根據(jù)實際的需求，對兩種方法進行正確分析，最終做出合理的選擇。setTimeout（）方法可以保證兩次執(zhí)行的定時事件之間的延遲時間保持固定值不變，所以如果遇到定時事件中調(diào)用了比較復(fù)雜、執(zhí)行時間較長的函數(shù)，而又不想在頻繁調(diào)用時產(chǎn)生混亂，使用setTimeout（）方法比較好；setInterval（）方法是按照當初設(shè)定的時間周期嚴格執(zhí)行，所以如果需要比較精確的定時事件，而且事件能在設(shè)定的時間間隔內(nèi)執(zhí)行完畢，則使用該方法比較合適。

參考文獻：

[1]Jeremy Keith.JavaScript DOM編程藝術(shù)[M].北京：人民郵電出版社，2007.

[2]Nicholas C.Zakas.JavaScript高級程序設(shè)計[M].北京：人民郵電出版社，2006.

[3]Flanagan.Javascript權(quán)威指南[M].北京： 機械工業(yè)出版社，2007.

[4]張大富，黃中敏.JavaScript動態(tài)網(wǎng)頁編程實例手冊[M].北京：海洋出版社，2005.

（作者單位：河南師范大學(xué)）