5-4 w{X

若要預約程式碼在某一段時間後才被執行,可用 setTimeout() 的內建函數,例如在下列的範例中,當你點選「丟手榴彈」後,三秒鐘之後才會出現一個警告視窗「轟!!!」:

Example(setTimeout01.htm):

其原始檔案內容如下:

原始檔(setTimeout01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>預約和取消程式碼的執行:預約一次</h2>
<hr>

<script>
function clickCallback(){
	document.theForm.theButton.value="三秒鐘後引爆...";
	setTimeout("alert('轟!!!'); document.theForm.theButton.value='丟手榴彈'", 3*1000);
}
</script>

<center>
<form name="theForm">
<input type="button" name=theButton value="丟手榴彈" onClick="clickCallback()">
</form>
</center>

<hr>
</body>
</html>

由上述範例可知,setTimeout() 的格式如下:

timer = setTimeout("JavaScript的命令列", 時間長度)
換句話說,當過了「時間長度」所指定的時間(以1/1000秒為單位)後,瀏覽器就會去執行「"JavaScript的命令列"」。而所傳回的輸出參數 timer,可被用在 clearTimeout() 以便解除預約的程式碼(詳見後述)。

如果我們要反覆地在固定的時間間格來執行某段程式碼,就必須將 setTimeout() 放在函數裡面,以保證此函數能夠在特定的時間間隔後,反覆地呼叫自己,跑馬燈就是一個最簡單的範例,在下列範例中,我們一口氣產生三個跑馬燈,分別顯示在表單的文字欄位、<div> 標籤內、以及視窗的狀態列,範例如下:

Example(movingText01.htm):

其原始檔案內容如下:

原始檔(movingText01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>跑馬燈</h2>
<hr>

<input type=text id=myText1 size=40>
<div id=myText2></div>

<script>
text="那河畔的金柳,是夕陽中的新娘;波光裡的豔影,在我的心頭蕩漾...";
text=text+"                  ";	// 加一些全形空白

function showMovingText(){
	var n = text.length;
	text = text.substr(1, n-1)+text.substr(0, 1);		// 將第一個字搬到最後面
	document.getElementById("myText1").value = text;	// 設定至文字欄位
	document.getElementById("myText2").innerHTML = text;	// 設定至 <div> 標籤內文
	window.status = text;					// 設定至狀態列
	setTimeout("showMovingText()", 400);			// 0.4 秒閃一遍
}

showMovingText();
</script>

<hr>
</body>
</html>

在上述範例的 showMovingText() 函數中,最後一列是

setTimeout("showMovingText()", 400);
當函數執行到此列時,可保證在 0.4 秒後,此函數又會被呼叫一次,依此類推,因此跑馬燈的文字,會在間隔 0.4 秒後就會被更新一次。另外,每次更新時,我們使用 substr() 來將第一個字元搬到字串的尾端,如此反覆搬移,就可以達到跑馬燈的效果。

Hint
有關於 substr() 和 substring() 的使用,再提示一下:如果 text = "我願是千萬條江河",則
  • text.substr(3,5)會傳回 "千萬條江河"(第3個字元開始,取5個字元)
  • text.substring(3,5)會傳回 "千萬"(第3個字元開始,第4個字元結束)

Hint
使用 setTimeout() 來反覆呼叫一個函數,並不代表是此函數的遞迴呼叫,請注意這兩者的差異。

Hint
id 和 name 屬性在 JavaScript 的用法有些不同:id 就像全域變數一樣,可在 JavaScript 中可以直接呼叫,但是必須使用 document.getElementById("id 標籤值") 來得到對應的物件;而 name 就像局部變數,外部直接看不到,必須經由 DOM 從上往下找,例如 document.theForm.theButton 等。

若要取消預約的程式碼,可用 clearTimeout(),例如:

Example(setTimeout02.htm):

其原始檔案內容如下:

原始檔(setTimeout02.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>預約程式碼的執行:預約與取消</h2>
<hr>

<script>
timeStep=0.1;	// 每 0.1 秒顯示一次時間
accumulated=0;	// 目前累計的時間
function showTime(){
	document.getElementById("theText").value=accumulated;
	accumulated+=timeStep;
	timer=setTimeout("showTime();", timeStep*1000);
}

function clickCallback(){
	switch(document.getElementById("theButton").value){
		case "開始計時":
			document.getElementById("theButton").value="停止計時";
			accumulated=0;					// 時間歸零
			showTime();					// 開始計時
			break;
		case "停止計時":
			document.getElementById("theButton").value="開始計時";
			clearTimeout(timer);				// 停止計時
			break;
		default:
			alert("Error!");
			break;
	}
}
</script>

<center>
<form>
<input type="button" id=theButton value="開始計時" onClick="clickCallback()">
<input type="text" id=theText>
</form>
</center>

<hr>
</body>
</html>

上述範例有兩個重點:

  1. 若按下「開始計時」,我們使用「timer=setTimeout("showTime();", timeStep*1000);」來預約 showTime() 在每 0.1 秒執行一次。
  2. 若按下「取消計時」,則我們使用「clearTimeout(timer);」來取消已經預約的程式碼。
使用 setTimeout() 和 clearTimeout(),我們可以有效地對「事件驅動」的 JavaScript 進行簡潔完整的時間控制。

由於「反覆執行一段程式碼」是很重要的功能,因此除了使用 setTimeout() 之外,JavaScript 後續又支援另一個函數 setInterval(),可以達到相同的功能,但在使用上更為簡潔。setInterval() 的格式如下:

timer = setInterval("JavaScript的命令列", 時間長度)
換句話說,每隔「時間長度」所指定的時間(以1/1000秒為單位)後,瀏覽器就會去執行「"JavaScript的命令列"」,而所傳回的輸出參數 timer 可被用在 clearInterval() 以便解除預約的程式碼(詳見後述)。首先我們看看由 setInterval() 所產生的即時更新時間顯示:

Example(setInterval01.htm):

其原始檔案內容如下:

原始檔(setInterval01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>預約程式碼的執行:使用 setInterval()</h2>
<hr>

<script>
function showTime(){
	date=new Date();
	document.getElementById("theText").value=date.toLocaleString();
}
setInterval("showTime()", 1000);		//每一秒更新一次
</script>

<center>
<form>
目前時間:<input type="text" id=theText size=30>
</form>
</center>

<hr>
</body>
</html>

若要停止時間顯示,可以使用 clearInterval(),請見下列範例:

Example(clearInterval01.htm):

其原始檔案內容如下:

原始檔(clearInterval01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>預約與停止程式碼的執行:使用 setInterval() 和 clearInterval()</h2>
<hr>

<script>
function showTime(){
	date=new Date();
	document.getElementById("theText").value=date.toLocaleString();
}
clock=setInterval("showTime()", 1000);		//每一秒更新一次
</script>

<center>
<form>
目前時間:<input type="text" id=theText size=30>
<input type=button name=controlButton value="停止時鐘" onClick="clearInterval(clock)">
</form>
</center>

<hr>
</body>
</html>

上述範例只是一個簡單範例,所以你一旦停止時間顯示,就沒辦法再恢復,除非重新載入網頁。


JavaScript 程式設計與應用:用於網頁用戶端