基于JavaScript的定時事件實現方法的研究

韓蒙蒙 李欣

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

關鍵詞：setInterval；setTimeout；定時事件

一、前言

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

二、定時事件功能通過setInterval（）方法實現

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

setInterval（參數1，參數2）；

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

在下面的例1中，我們通過setInterval（）方法來實現每隔1秒鐘重復彈出窗口的效果，執行代碼之后提示框將會每隔1秒自動彈出，直到瀏覽器窗口關閉，或者轉到了另外一個頁面為止。例1代碼如下：

functiontimedMsg（）{

var a=setInterval（“alert（‘1 seconds！）”，1000）

}

三、定時事件功能通過setTimeout（）方法實現

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

setTimeout（參數1，參數2）；

這兩個參數的含義和setInterval（）方法中的兩個參數含義一樣，實現的功能也是當過了參數2的時間段之后就會執行參數1那段相應的代碼，但是setTimeout（）方法不循環執行，只執行一次。

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

functiontimedMsg（）{

var a=setTimeout（“alert（‘1 seconds！）”，1000）

}

所以，要想用setTimeout（）方法來定期重復的執行參數1的代碼，這就需要在執行的代碼中再調用自己，即使用遞歸函數。

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

functiontimedMsg（）{

alert（‘1seconds！）；

setTimeout（“timedMsg（）”，1000）；

}

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

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

1.用setInterval（）實現定時事件

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 （）實現定時事件

vartev；

functioninit（）{

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

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

}

function stop（）{

clearTimeout（tev）；

}

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

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

六、總結

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

參考文獻：

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

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

[3]Flanagan.Javascript權威指南[M].北京： 機械工業出版社，2007.

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

（作者單位：河南師范大學）