若要預約程式碼在某一段時間後才被執行,可用 setTimeout() 的內建函數,例如在下列的範例中,當你點選「丟手榴彈」後,三秒鐘之後才會出現一個警告視窗「轟!!!」:
其原始檔案內容如下:
由上述範例可知,setTimeout() 的格式如下:
timer = setTimeout("JavaScript的命令列", 時間長度)
換句話說,當過了「時間長度」所指定的時間(以1/1000秒為單位)後,瀏覽器就會去執行「"JavaScript的命令列"」。而所傳回的輸出參數 timer,可被用在 clearTimeout() 以便解除預約的程式碼(詳見後述)。
如果我們要反覆地在固定的時間間格來執行某段程式碼,就必須將 setTimeout() 放在函數裡面,以保證此函數能夠在特定的時間間隔後,反覆地呼叫自己,跑馬燈就是一個最簡單的範例,在下列範例中,我們一口氣產生三個跑馬燈,分別顯示在表單的文字欄位、<div> 標籤內、以及視窗的狀態列,範例如下:
其原始檔案內容如下:
在上述範例的 showMovingText() 函數中,最後一列是
setTimeout("showMovingText()", 400);
當函數執行到此列時,可保證在 0.4 秒後,此函數又會被呼叫一次,依此類推,因此跑馬燈的文字,會在間隔 0.4 秒後就會被更新一次。另外,每次更新時,我們使用 substr() 來將第一個字元搬到字串的尾端,如此反覆搬移,就可以達到跑馬燈的效果。
若要取消預約的程式碼,可用 clearTimeout(),例如:
其原始檔案內容如下:
上述範例有兩個重點:
- 若按下「開始計時」,我們使用「timer=setTimeout("showTime();", timeStep*1000);」來預約 showTime() 在每 0.1 秒執行一次。
- 若按下「取消計時」,則我們使用「clearTimeout(timer);」來取消已經預約的程式碼。
使用 setTimeout() 和 clearTimeout(),我們可以有效地對「事件驅動」的 JavaScript 進行簡潔完整的時間控制。
由於「反覆執行一段程式碼」是很重要的功能,因此除了使用 setTimeout() 之外,JavaScript 後續又支援另一個函數 setInterval(),可以達到相同的功能,但在使用上更為簡潔。setInterval() 的格式如下:
timer = setInterval("JavaScript的命令列", 時間長度)
換句話說,每隔「時間長度」所指定的時間(以1/1000秒為單位)後,瀏覽器就會去執行「"JavaScript的命令列"」,而所傳回的輸出參數 timer 可被用在 clearInterval() 以便解除預約的程式碼(詳見後述)。首先我們看看由 setInterval() 所產生的即時更新時間顯示:
其原始檔案內容如下:
若要停止時間顯示,可以使用 clearInterval(),請見下列範例:
其原始檔案內容如下:
上述範例只是一個簡單範例,所以你一旦停止時間顯示,就沒辦法再恢復,除非重新載入網頁。
JavaScript 程式設計與應用:用於網頁用戶端