JS中setTimeout()的用法詳解

更新時(shí)間：2013年04月14日 16:47:31 投稿：mdxy-dxy

setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來(lái)設(shè)定一個(gè)時(shí)間, 時(shí)間到了, 就會(huì)執(zhí)行一個(gè)指定的 method

setTimeout
clearTimeout
Set flag

1. SetTimeOut()

1.1 SetTimeOut()語(yǔ)法例子

1.2 用SetTimeOut()執(zhí)行Function

1.3 SetTimeOut()語(yǔ)法例子

1.4 設(shè)定條件使SetTimeOut()停止

1.5 計(jì)分及秒的counter

2. ClearTimeout()

3. Set Flag

10.1　setTimeout( )

　　setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來(lái)設(shè)定一個(gè)時(shí)間, 時(shí)間到了, 就會(huì)執(zhí)行一個(gè)指定的 method。請(qǐng)先看以下一個(gè)簡(jiǎn)單, 這是沒(méi)有實(shí)際用途的例子, 只是用來(lái)示范 setTimeout( ) 的語(yǔ)法。

1.　setTimeout( ) 語(yǔ)法例子

練習(xí)-69　等候三秒才執(zhí)行的 alert( )

　　在第 3 章說(shuō)到 alert 對(duì)話盒, 一般是用按鈕叫出來(lái), 在這練習(xí), 你會(huì)看到網(wǎng)頁(yè)開(kāi)啟后 3 秒, 就會(huì)自動(dòng)出現(xiàn)一個(gè) alert 對(duì)話盒。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的timeout1.htm, 這檔桉有以下內(nèi)容:

<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范網(wǎng)頁(yè) </font> </h1> <p> </br>
<p> 請(qǐng)等三秒!
<script>
setTimeout("alert('對(duì)不起, 要你久候')", 3000 )
</script>
</body> </html>

2.留意網(wǎng)頁(yè)開(kāi)啟后三秒, 就會(huì)出現(xiàn)一個(gè) alert 對(duì)話盒。

setTimeout( )是設(shè)定一個(gè)指定等候時(shí)間 (單位是千分之一秒, millisecond), 時(shí)間到了, 瀏覽器就會(huì)執(zhí)行一個(gè)指定的 method 或 function, 有以下語(yǔ)法:

今次例子是設(shè)定等 3 秒 (3000 milliseconds), 瀏覽器就會(huì)執(zhí)行 alert( ) 這一個(gè)method。

2.　用 setTimeout( ) 來(lái)執(zhí)行 function

　　setTimeout( ) 通常是與 function 一起使用, 以下是一個(gè)較上個(gè)練習(xí)複雜的例子。

練習(xí)-70　狀態(tài)列中自動(dòng)消失的文字

　　在練習(xí)-20, 你看過(guò)如何用按鈕在狀態(tài)列顯示文字, 然后再用按鈕消除文字, 在這練習(xí), 你看到如何用按鈕在狀態(tài)列顯示文字, 而這文字會(huì)在三秒后自動(dòng)消失。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的timeout2.htm, 這檔桉有以下內(nèi)容:

<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范網(wǎng)頁(yè) </font> </h1> <p> </br>

<script>
function clearWord( )
{　window.status=""　}
</script>

<form>
<input type="button" value="在狀態(tài)列顯示文字"
　　onClick="window.status='Hello' ,setTimeout('clearWord()', 3000) ">
</form>
</body> </html>

2.請(qǐng)?jiān)诎粹o上按一下,你應(yīng)見(jiàn)到狀態(tài)列出現(xiàn) Hello 這字, 留意過(guò)了三秒, 這字就會(huì)消失。

1.　這處先設(shè)定一個(gè)名為 clearWord( ) 的 function, 作以下定義:

window.status=""

　　這是用來(lái)消除狀態(tài)列的文字 (請(qǐng)看練習(xí)-20 的說(shuō)明), 瀏覽器執(zhí)行 clearWord( ) , 就會(huì)消除狀態(tài)列的文字。

2.　今次按鈕設(shè)定了啟動(dòng)以下兩項(xiàng)工作, 用，分隔, 瀏覽器會(huì)順序執(zhí)行這兩項(xiàng)工作:

onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "

3.　今次的 setTimeout( ) 有以下設(shè)定:

這是設(shè)定等 3 秒 (3000 milliseconds) 瀏覽器就會(huì)執(zhí)行 clearWord( ) 這一個(gè)function。

在第 2 章, 你看過(guò)如何使到父視窗開(kāi)啟時(shí)自動(dòng)開(kāi)啟一個(gè)子視窗, 若觀看者不關(guān)閉這子視窗, 這子視窗就會(huì)一路開(kāi)啟。看過(guò)以上的練習(xí), 請(qǐng)你設(shè)計(jì)一個(gè)會(huì)開(kāi)啟子視窗的網(wǎng)頁(yè), 而這子視窗在開(kāi)啟后兩秒, 就會(huì)自動(dòng)關(guān)閉。

3.　不斷重複執(zhí)行的 setTimeout( )

　　setTimeout( ) 預(yù)設(shè)只是執(zhí)行一次, 但我們可以使用一個(gè)循環(huán)方式, 使到一個(gè)setTimeout( ) 再啟動(dòng)自己一次, 就會(huì)使到第二個(gè) setTimeout( ) 執(zhí)行, 第二個(gè)又啟動(dòng)第三個(gè), 這樣循環(huán)下去, 這 setTimeout( ) 就會(huì)不斷執(zhí)行。

練習(xí)-71　自動(dòng)每秒加 1 的 function

　　在這練習(xí), 你看到如何使用 setTimeout( ) 令文字框的數(shù)值每秒就加 1, 當(dāng)然你也可以設(shè)定其他遞增的速度, 例如每五秒就加 5, 或每五秒就加 1。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的 timeout3.htm, 這檔桉有以下內(nèi)容:

<html> <head>
<script>
x = 0
function countSecond( )
{　x = x+1
　 document.fm.displayBox.value=x
　 setTimeout("countSecond()", 1000)
}
</script> </head>
<body bgcolor=lightcyan text=red> <p> </br>
<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>
<script>
countSecond( )
</script>
</body> </html>

2.　網(wǎng)頁(yè)開(kāi)啟后, 請(qǐng)你留意文字框中的數(shù)值轉(zhuǎn)變。

3.　請(qǐng)你將這檔桉複製去硬碟, 更改一些設(shè)定, 例如 x = x+5, 或?qū)⒌群驎r(shí)間改為5000, 看有什麼反應(yīng)。

1.　這網(wǎng)頁(yè)有兩個(gè) script, 第一個(gè)是設(shè)定 countSecond( ) 這個(gè) function, 第二個(gè)在后的是在網(wǎng)頁(yè)完全載入后, 就啟動(dòng)這 function。

2.　留意今次以下的設(shè)定:

function countSecond( )
{　x = x+1
　 document.fm.displayBox.value = x
　 setTimeout("countSecond()", 1000)
}

當(dāng) countSecond( ) 啟動(dòng)后, 就會(huì)啟動(dòng) setTimeout( ), 這個(gè) method 在一秒后又啟動(dòng) countSecond( ), countSecond( ) 啟動(dòng)后又啟動(dòng) setTimeout( ) , 所以得出的結(jié)果是 countSecond( ) 每秒執(zhí)行一次。

3.　在 JavaScript, 我們是使用這處說(shuō)的方法使到一些事項(xiàng)不斷執(zhí)行, 其中一個(gè)用途是顯示轉(zhuǎn)動(dòng)時(shí)間, 另一個(gè)用途是設(shè)定跑動(dòng)文字, 隨后的章節(jié)會(huì)有例子。

　　用上述的方法設(shè)定時(shí)間, setTimeout( ) 雖然設(shè)定了是一秒, 但瀏覽器還有另外兩項(xiàng)功能要執(zhí)行, 所以一個(gè)循環(huán)的時(shí)間是稍多于一秒, 例如一分鐘可能只有58 個(gè)循環(huán)。

4.　設(shè)定條件使 setTimeout( ) 停止

　　setTimeout( ) 的迴圈開(kāi)始后, 就會(huì)不斷重複, 在上個(gè)練習(xí), 你看到文字框的數(shù)字不斷跳動(dòng), 但我們是有方法使到數(shù)字跳到某一個(gè)數(shù)值就停下來(lái), 其中一個(gè)方法是用 if...else 設(shè)定一個(gè)條件, 若是 TRUE 就繼續(xù)執(zhí)行 setTimeout( ) , 若是 FALSE 就停止。

　　例如要使到上個(gè)練習(xí)的 counter 跳到 20 就停下, 可將有關(guān)的 function 作以下的更改。

function countSecond( )
{　if ( x < 20 )
　　　{　x = x + 1
　　　　 document.displaySec.displayBox.value = x
　　　　 setTimeout("countSecond( )", 1000)
　　}
}

5.　計(jì)分及計(jì)秒的 counter

　　在前面的練習(xí), 相信你已學(xué)識(shí)如何使用 setTimeout( ), 現(xiàn)在請(qǐng)你看一個(gè)較複習(xí)的例子。

練習(xí)-72　計(jì)時(shí)的 counter

　　在這練習(xí), 你要設(shè)定兩個(gè)文字框, 一個(gè)顯示分鐘, 另一個(gè)顯示秒, 網(wǎng)頁(yè)開(kāi)啟后, 就會(huì)在這兩個(gè)文字框中自動(dòng)計(jì)時(shí)。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的timeout4.htm, 這檔桉有以下內(nèi)容:

<html> <head>
<script>
x=0
y=-1
function countMin( )
{　y=y+1
　 document.displayMin.displayBox.value=y
　 setTimeout("countMin( )",60000)
}

function countSec( )
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}
</script> </head>

<body bgcolor=lightcyantext=red> <p> </br>

<table> <tr valign=top> <td> 你在本網(wǎng)頁(yè)的連線時(shí)間是:</td>

<td> <form name=displayMin>
<input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 分 </td>

<td> <form name=displaySec></td>
<td> <input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 秒。</td> </tr> </table>

<script>
countMin( )
countSec( )
</script>
</body> </html>

2.　請(qǐng)你留意兩個(gè)文字框中的數(shù)字轉(zhuǎn)變。

1.　這網(wǎng)頁(yè)有兩個(gè) function, 一個(gè)用來(lái)計(jì)分鐘, 一個(gè)用來(lái)計(jì)秒。在這處, 筆者只是示范setTimeout( ) 的操作, 因?yàn)橛?jì)時(shí)器有其他更精簡(jiǎn)的寫法。(留意: 這方式的計(jì)時(shí)并不準(zhǔn)確。)

2.　留意計(jì)秒的 function:

function countSec( )
{　x = x + 1
　 z = x% 60
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000) 

}

這處的 % 符號(hào)是 modulus (馀數(shù)), 例如 z = x % 60 表示先進(jìn)行 x / 60, 得出的馀數(shù)作為 z 這變數(shù), 例如 82 秒, modulus 就是 22, 所以文字框會(huì)顯示 22 而不是 82。

3.　若你要將單位數(shù)字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:

function countSec( )
{　x = x + 1
　 z = x % 60
　 if (z < 10)　{　z = "0"+ z　}
　 document.displaySec.displayBox.value=z
　 setTimeout("countSec()", 1000)
}

10.2　clearTimeout( )

　　在前一節(jié), 你看過(guò)如何使用 setTimeout( ) 來(lái)使到瀏覽器不斷執(zhí)行一個(gè) function, 當(dāng)一個(gè) setTimeout( ) 開(kāi)始了循環(huán)的工作, 我們要使它停下來(lái), 可使用 clearTimeout( ) 這 method。

　　clearTimout( ) 有以下語(yǔ)法:　clearTimeout(timeoutID)

　　要使用 clearTimeout( ), 我們?cè)O(shè)定 setTimeout( ) 時(shí), 要給予這 setTimout( ) 一個(gè)名稱, 這名稱就是 timeoutID , 我們叫停時(shí), 就是用這 timeoutID來(lái)叫停, 這是一個(gè)自訂名稱, 但很多程式員就以 timeoutID 為名。

　　在下面的例子, 筆者設(shè)定兩個(gè) timeoutID, 分別命名為 meter1 及 meter2, 如下:

timeoutID
　↓
meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)

　　使用這 meter1 及 meter2 這些 timeoutID 名稱, 在設(shè)定 clearTimeout( ) 時(shí), 就可指定對(duì)哪一個(gè) setTimeout( ) 有效, 不會(huì)擾及另一個(gè) setTimeout( ) 的操作。

練習(xí)-73　可停止的 setTimeout( )

　　這練習(xí)以練習(xí)-71為藍(lán)本, 但作了兩個(gè)改變: (1) 有兩個(gè) setTimeout( ), (2) 有兩個(gè)按鈕, 分別可停止這兩個(gè) setTimout( )。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的clear.htm, 這檔桉有以下內(nèi)容:

<html> <head>
<script>
x = 0
y = 0

function count1( )
{　x = x+ 1
　 document.display1.box1.value= x
　 meter1=setTimeout("count1()", 1000)
}

function count2( )
{　y = y+ 1
　 document.display2.box2.value= y
　 meter2=setTimeout("count2()", 1000)
} 
</script> </head>


<body bgcolor=lightcyantext=red> <p> </br>

<form name=display1>
<input type="text" name="box1"value="0" size=4 >
<input type=button value="停止計(jì)時(shí)" onClick="clearTimeout(meter1)" >
<input type=button value="繼續(xù)計(jì)時(shí)" onClick="count1() " >
</form>
<p>
<form name=display2>
<input type="text" name="box2"value="0" size=4 >
<input type=button value="停止計(jì)時(shí)" onClick="clearTimeout(meter2) " >
<input type=button value="繼續(xù)計(jì)時(shí)" onClick="count2( ) " >
</form>
<script>
count1( )
count2( )
</script>
</body> </html>

2.　留意網(wǎng)頁(yè)中的兩個(gè)文字框及內(nèi)裡變動(dòng)的數(shù)字, 每個(gè)文字框旁有兩個(gè)按鈕, 請(qǐng)你試試兩個(gè)按鈕的反應(yīng)。

3.　請(qǐng)你連續(xù)按多次 [繼續(xù)計(jì)時(shí)]的按鈕, 留意數(shù)值的跳動(dòng)加快了, 原因是每按一次就啟動(dòng) function 一次, 每個(gè) function 都令數(shù)值跳動(dòng), 例如啟動(dòng)同一的 function 四次, 就會(huì)一秒跳四次。(請(qǐng)看下一節(jié))

10.3　Set flag

　　前個(gè)練習(xí)說(shuō)到我們用一個(gè)按鈕來(lái)啟動(dòng)一個(gè) function, 每按一下就會(huì)啟動(dòng)這 function 一次, 請(qǐng)看以下例子。

練習(xí)-74　效果重複的 setTimeout( )

　　這練習(xí)實(shí)際是將 練習(xí)-73 簡(jiǎn)化, 只有一個(gè)計(jì)時(shí)器, 筆者想示范的是每按 [繼續(xù)計(jì)時(shí)] 一次, 就會(huì)啟動(dòng) count( ) 這 function 一次。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的flag1.htm, 這檔桉有以下內(nèi)容:

<html> <head>
<script>
x=0
function count( )
{　x = x + 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
}
</script> </head> <body bgcolor=lightcyantext=red> <p> </br>
<form name=display>
<input type="text" name="box"value="0" size=4 >
<input type=button value="停止計(jì)時(shí)" onClick="clearTimeout(timeoutID) " >
<input type=button value="繼續(xù)計(jì)時(shí)" onClick="count( ) " >
</form> <p>
<script>
count( )
</script>
</body> </html>

2.　網(wǎng)頁(yè)開(kāi)啟后, 你應(yīng)見(jiàn)到文字框中的數(shù)字跳動(dòng), 請(qǐng)你按四次 [繼續(xù)計(jì)時(shí)], 留意這會(huì)加快數(shù)字跳動(dòng), 原因是有關(guān)的 function 被開(kāi)啟了多個(gè), 每個(gè)都會(huì)使數(shù)字轉(zhuǎn)變。

3.　按了四次 [繼續(xù)計(jì)時(shí)] 的按鈕后, 請(qǐng)你按 [停止計(jì)時(shí)] 的按鈕, 你會(huì)發(fā)現(xiàn)要按五次才能停止數(shù)字跳動(dòng)。

　　在編寫程式時(shí), 我們常要提防使用者作出一些特別動(dòng)作, 例如使用者按兩次 [繼續(xù)計(jì)時(shí)] 按鈕, 這計(jì)時(shí)器就失準(zhǔn)了。我們是否有辦法使到一個(gè)按鈕被按一次就失效呢? 這就不會(huì)產(chǎn)生重複效果。

　　筆者藉這處的例子 (隨后還有多個(gè)例子), 解說(shuō)程式中一個(gè) set flag (設(shè)定旗標(biāo)) 的概念, flag 是一個(gè)記認(rèn), 一般來(lái)說(shuō), 這可以是 0 或是 1 (也可用 on 或 off, 或任何兩個(gè)自選的名稱或數(shù)字), 但也可以是 2、3、4 或更大的數(shù)字, 在這例子有以下設(shè)定:

1.　程式開(kāi)啟時(shí) flag=0。

2.　當(dāng) counter( ) 執(zhí)行時(shí)會(huì)順便將 flag 變?yōu)?1。

3.　在 [繼續(xù)計(jì)時(shí)] 這按鈕的反應(yīng)中, 會(huì)先檢查 flag 是 0 或是 1, 若是 0 就會(huì)產(chǎn)生作用, 若是 1 就沒(méi)有反應(yīng)。

4.　使用這 flag 的方式, count( ) 這 function 開(kāi)啟后, [繼續(xù)計(jì)時(shí)] 這按鈕就沒(méi)有作用。

　　這處的 flag 是一個(gè)變數(shù), 可任意取名, 我們用 flag來(lái)稱呼這變數(shù)的原因, 是因?yàn)檫@變數(shù)好處一支旗, 將旗豎起 (flag is on), 就會(huì)產(chǎn)生一個(gè)作用, 將旗放下 (flag is off), 就產(chǎn)生另一個(gè)作用。

練習(xí)-75　只可開(kāi)啟一次的 function

　　這練習(xí)是將上個(gè)練習(xí)加多一個(gè) flag, 使到每次只能有一個(gè) count( ) 這 function 在進(jìn)行。

1.　請(qǐng)用瀏覽器開(kāi)啟示范磁碟中的flag2.htm, 這檔桉有以下內(nèi)容:

<html> <head>
<script>
x = 0
flag = 0
function count( )
{　x = x+ 1
　 document.display.box.value= x
　 timeoutID=setTimeout("count()", 1000)
　 flag = 1
}

function restart( )
{　if (flag==0)
　　　{　count( )　}
}
</script> </head>

<body bgcolor=lightcyantext=red> <p> </br>
<form name=display>
<input type="text" name="box"value="0" size=4 >
<input type=button value="停止計(jì)時(shí)"
　　onClick="clearTimeout(timeoutID);flag=0" >
<input type=button value="繼續(xù)計(jì)時(shí)" onClick="restart() " >
</form> <p>

<script>
count( )
</script>

<form>
<input type=button value="Show flag"
onClick="alert('The flag now is '+ flag)" >
</form>
</body> </html>

2.　在網(wǎng)頁(yè)中, 你應(yīng)見(jiàn)到三個(gè)按鈕及文字框中的數(shù)字跳動(dòng)。

3.　請(qǐng)你按 [Show flag]這按鈕, 應(yīng)見(jiàn)到一個(gè)話對(duì)盒顯示 flag 是 1。

4.　請(qǐng)你按 [停止計(jì)時(shí)]這按鈕, 數(shù)字停止跳動(dòng), 請(qǐng)你按 [Show flag] 這按鈕, 應(yīng)見(jiàn)到話對(duì)盒顯示 flag 是 0。

5.　請(qǐng)你按多次 [繼續(xù)計(jì)時(shí)]這按鈕, 你應(yīng)見(jiàn)到數(shù)字不會(huì)加快, 請(qǐng)你按 [Show flag]這按鈕, 應(yīng)見(jiàn)到話對(duì)盒顯示 flag 變回 1。

1.　這網(wǎng)頁(yè)第 4 行有這一句: flag=0 , 這是設(shè)定 flag 這變數(shù)及將初始值定為 0, 你也可將初始值定為 1, 隨后有關(guān)的 0 和 1 對(duì)調(diào)。

2.　count( ) 這 function 最后一句是 flag=1 , 所以啟動(dòng) count( ) 后, flag 就會(huì)變?yōu)?1。

3.　[繼續(xù)計(jì)時(shí)] 的按鈕是用來(lái)啟動(dòng) restart( ), 這 function 有以下設(shè)定:

function restart( )
{　if (flag==0)
　　　{　count( )　}
}

　　這處的 if statement 檢查 flag是否等于 0, 若是 0 就啟動(dòng) count(), 若是 1 (即不是 0) 就沒(méi)有反應(yīng),使用這方法, 若 count( )已在執(zhí)行中, [繼續(xù)計(jì)時(shí)] 這按鈕不會(huì)有作用。

　　這處的 flag=1設(shè)定, 實(shí)際設(shè)為 1 或 2 或 3 等數(shù)值都是一樣的,只要不是 0 就可以了, 所以這兩個(gè)相對(duì)的旗標(biāo),看似是 "0" 和 "1", 實(shí)際是"0" 和 "non-zero" (非-0)。

4.　[停止計(jì)時(shí)] 的按鈕有以下設(shè)定: