5-4 嚙緩嚙踝蕭嚙緹嚙踝蕭嚙碼嚙踝蕭嚙踝蕭嚙踝蕭

若要預約程式碼在某一段時間後才被執行，可用 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 程式設計與應用：用於網頁用戶端