SetTimeOut jquery的做用
1. SetTimeOut()html
1.1 SetTimeOut()語法例子瀏覽器
1.2 用SetTimeOut()執行Functionspa
1.3 SetTimeOut()語法例子設計
1.4 設定條件使SetTimeOut()中止rest
1.5 計分及秒的counterorm
2. ClearTimeout()htm
3. Set Flag
ip
setTimeout( ) 是屬於 window 的 method, 但咱們都是略去 window 這頂層物件名稱, 這是用來設定一個時間, 時間到了, 就會執行一個指定的 method。請先看如下一個簡單, 這是沒有實際用途的例子, 只是用來示範 setTimeout( ) 的語法。input
練習-69 等候三秒才執行的 alert( )
在 第 3 章 說到 alert 對話盒, 通常是用按鈕叫出來, 在這練習, 你會看到網頁開啓後 3 秒, 就會自動出現一個 alert 對話盒。
1. 請用瀏覽器開啓示範磁碟中的timeout1.htm, 這檔桉有如下內容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示範網頁 </font> </h1> <p> </br>
<p> 請等三秒!
<script>
setTimeout("alert('對不起, 要你久候')", 3000 )
</script>
</body> </html>
2. 留意網頁開啓後三秒, 就會出現一個 alert 對話盒。
setTimeout( )是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執行一個指定的 method 或 function, 有如下語法:
今次例子是設定等 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) 這一個method。
2. 用 setTimeout( ) 來執行 function
setTimeout( ) 一般是與 function 一塊兒使用, 如下是一個較上個練習複雜的例子。
練習-70 狀態列中自動消失的文字
在練習-20, 你看過如何用按鈕在狀態列顯示文字, 而後再用按鈕消除文字, 在這練習, 你看到如何用按鈕在狀態列顯示文字, 而這文字會在三秒後自動消失。
1. 請用瀏覽器開啓示範磁碟中的timeout2.htm, 這檔桉有如下內容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示範網頁 </font> </h1> <p> </br>
<script>
function clearWord( )
{ window.status="" }
</script>
<form>
<input type="button" value="在狀態列顯示文字"
onClick="window.status='Hello' ,setTimeout('clearWord()', 3000) ">
</form>
</body> </html>
2. 請在按鈕上按一下,你應見到狀態列出現 Hello 這字, 留意過了三秒, 這字就會消失。
1. 這處先設定一個名爲 clearWord( ) 的 function, 做如下定義:
window.status=""
這是用來消除狀態列的文字 (請看練習-20 的說明), 瀏覽器執行 clearWord( ) , 就會消除狀態列的文字。
2. 今次按鈕設定了啓動如下兩項工做, 用 ， 分隔, 瀏覽器會順序執行這兩項工做:
onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "
3. 今次的 setTimeout( ) 有如下設定:
這是設定等 3 秒 (3000 milliseconds) 瀏覽器就會執行 clearWord( ) 這一個function。
在第 2 章, 你看過如何使到父視窗開啓時自動開啓一個子視窗, 若觀看者不關閉這子視窗, 這子視窗就會一路開啓。看過以上的練習, 請你設計一個會開啓子視窗的網頁, 而這子視窗在開啓後兩秒, 就會自動關閉。
setTimeout( ) 預設只是執行一次, 但咱們可使用一個循環方式, 使到一個setTimeout( ) 再啓動本身一次, 就會使到第二個 setTimeout( ) 執行, 第二個又啓動第三個, 這樣循環下去, 這 setTimeout( ) 就會不斷執行。
練習-71 自動每秒加 1 的 function
在這練習, 你看到如何使用 setTimeout( ) 令文字框的數值每秒就加 1, 固然你也能夠設定其餘遞增的速度, 例如每五秒就加 5, 或每五秒就加 1。
1. 請用瀏覽器開啓示範磁碟中的 timeout3.htm, 這檔桉有如下內容:
<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. 網頁開啓後, 請你留意文字框中的數值轉變。
3. 請你將這檔桉複製去硬碟, 更改一些設定, 例如 x = x+5, 或將等候時間改成5000, 看有什麼反應。
1. 這網頁有兩個 script, 第一個是設定 countSecond( ) 這個 function, 第二個在後的是在網頁徹底載入後, 就啓動這 function。
2. 留意今次如下的設定:
function countSecond( )
{ x = x+1
document.fm.displayBox.value = x
setTimeout("countSecond()", 1000)
}
當 countSecond( ) 啓動後, 就會啓動 setTimeout( ), 這個 method 在一秒後又啓動 countSecond( ),countSecond( ) 啓動後又啓動 setTimeout( ) , 因此得出的結果是 countSecond( ) 每秒執行一次。
3. 在 JavaScript, 咱們是使用這處說的方法使到一些事項不斷執行, 其中一個用途是顯示轉動時間, 另外一個用途是設定跑動文字, 隨後的章節會有例子。
用上述的方法設定時間, setTimeout( ) 雖然設定了是一秒, 但瀏覽器還有另外兩項功能要執行, 因此一個循環的時間是稍多於一秒, 例如一分鐘可能只有58 個循環。
setTimeout( ) 的迴圈開始後, 就會不斷重複, 在上個練習, 你看到文字框的數字不斷跳動, 但咱們是有方法使到數字跳到某一個數值就停下來, 其中一個方法是用 if...else 設定一個條件, 如果 TRUE 就繼續執行 setTimeout( ) , 如果 FALSE 就中止。
例如要使到上個練習的 counter 跳到 20 就停下, 可將有關的 function 做如下的更改。
function countSecond( )
{ if ( x < 20 )
{ x = x + 1
document.displaySec.displayBox.value = x
setTimeout("countSecond( )", 1000)
}
}
在前面的練習, 相信你已學識如何使用 setTimeout( ), 如今請你看一個較複習的例子。
練習-72 計時的 counter
在這練習, 你要設定兩個文字框, 一個顯示分鐘, 另外一個顯示秒, 網頁開啓後, 就會在這兩個文字框中自動計時。
1. 請用瀏覽器開啓示範磁碟中的timeout4.htm, 這檔桉有如下內容:
<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> 你在本網頁的連線時間是:</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. 請你留意兩個文字框中的數字轉變。
1. 這網頁有兩個 function, 一個用來計分鐘, 一個用來計秒。在這處, 筆者只是示範setTimeout( ) 的操做, 由於計時器有其餘更精簡的寫法。(留意: 這方式的計時並不許確。)
2. 留意計秒的 function:
function countSec( )
{ x = x + 1
z = x% 60
document.displaySec.displayBox.value=z
setTimeout("countSec()", 1000)
}
這處的 % 符號是 modulus (餘數), 例如 z = x % 60 表示先進行 x / 60, 得出的餘數做爲 z 這變數, 例如 82 秒, modulus 就是 22, 因此文字框會顯示 22 而不是 82。
3. 若你要將單位數字在前加上 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)
}
在前一節, 你看過如何使用 setTimeout( ) 來使到瀏覽器不斷執行一個 function, 當一個 setTimeout( )開始了循環的工做, 咱們要使它停下來, 可以使用 clearTimeout( ) 這 method。
clearTimout( ) 有如下語法: clearTimeout(timeoutID)
要使用 clearTimeout( ), 咱們設定 setTimeout( ) 時, 要給予這 setTimout( ) 一個名稱, 這名稱就是 timeoutID , 咱們叫停時, 就是用這 timeoutID來叫停, 這是一個自訂名稱, 但不少程式員就以 timeoutID 爲名。
在下面的例子, 筆者設定兩個 timeoutID, 分別命名爲 meter1 及 meter2, 以下:
timeoutID
↓
meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)
使用這 meter1 及 meter2 這些 timeoutID 名稱, 在設定 clearTimeout( ) 時, 就可指定對哪個 setTimeout( ) 有效, 不會擾及另外一個 setTimeout( ) 的操做。
練習-73 可中止的 setTimeout( )
這練習以練習-71爲藍本, 但做了兩個改變: (1) 有兩個 setTimeout( ), (2) 有兩個按鈕, 分別可中止這兩個 setTimout( )。
1. 請用瀏覽器開啓示範磁碟中的clear.htm, 這檔桉有如下內容:
<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="中止計時" onClick="clearTimeout(meter1)" >
<input type=button value="繼續計時" onClick="count1() " >
</form>
<p>
<form name=display2>
<input type="text" name="box2"value="0" size=4 >
<input type=button value="中止計時" onClick="clearTimeout(meter2) " >
<input type=button value="繼續計時" onClick="count2( ) " >
</form>
<script>
count1( )
count2( )
</script>
</body> </html>
2. 留意網頁中的兩個文字框及內裡變更的數字, 每一個文字框旁有兩個按鈕, 請你試試兩個按鈕的反應。
3. 請你連續按屢次 [繼續計時]的按鈕, 留意數值的跳動加快了, 緣由是每按一次就啓動 function 一次, 每一個 function 都令數值跳動, 例如啓動同一的 function 四次, 就會一秒跳四次。(請看下一節)
前個練習說到咱們用一個按鈕來啓動一個 function, 每按一下就會啓動這 function 一次, 請看如下例子。
練習-74 效果重複的 setTimeout( )
這練習實際是將 練習-73 簡化, 只有一個計時器, 筆者想示範的是每按 [繼續計時] 一次, 就會啓動 count( ) 這 function 一次。
1. 請用瀏覽器開啓示範磁碟中的flag1.htm, 這檔桉有如下內容:
<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="中止計時" onClick="clearTimeout(timeoutID) " >
<input type=button value="繼續計時" onClick="count( ) " >
</form> <p>
<script>
count( )
</script>
</body> </html>
2. 網頁開啓後, 你應見到文字框中的數字跳動, 請你按四次 [繼續計時], 留意這會加快數字跳動, 緣由是有關的 function 被開啓了多個, 每一個都會使數字轉變。
3. 按了四次 [繼續計時] 的按鈕後, 請你按 [中止計時] 的按鈕, 你會發現要按五次才能中止數字跳動。
在編寫程式時, 咱們常要提防使用者做出一些特別動做, 例如使用者按兩次 [繼續計時] 按鈕, 這計時器就失準了。咱們是否有辦法使到一個按鈕被按一次就失效呢? 這就不會產生重複效果。
筆者藉這處的例子 (隨後還有多個例子), 解說程式中一個 set flag (設定旗標) 的概念, flag 是一個記認, 通常來講, 這能夠是 0 或是 1 (也可用 on 或 off, 或任何兩個自選的名稱或數字), 但也能夠是 二、三、4 或更大的數字, 在這例子有如下設定:
1. 程式開啓時 flag=0。
2. 當 counter( ) 執行時會順便將 flag 變爲 1。
3. 在 [繼續計時] 這按鈕的反應中, 會先檢查 flag 是 0 或是 1, 如果 0 就會產生做用, 如果 1 就沒有反應。
4. 使用這 flag 的方式, count( ) 這 function 開啓後, [繼續計時] 這按鈕就沒有做用。
這處的 flag 是一個變數, 可任意取名, 咱們用 flag來稱呼這變數的緣由, 是由於這變數好處一支旗, 將旗豎起 (flag is on), 就會產生一個做用, 將旗放下 (flag is off), 就產生另外一個做用。
練習-75 只可開啓一次的 function
這練習是將上個練習加多一個 flag, 使到每次只能有一個 count( ) 這 function 在進行。
1. 請用瀏覽器開啓示範磁碟中的flag2.htm, 這檔桉有如下內容:
<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="中止計時"
onClick="clearTimeout(timeoutID);flag=0" >
<input type=button value="繼續計時" 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. 在網頁中, 你應見到三個按鈕及文字框中的數字跳動。
3. 請你按 [Show flag]這按鈕, 應見到一個話對盒顯示 flag 是 1。
4. 請你按 [中止計時]這按鈕, 數字中止跳動, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 是 0。
5. 請你按屢次 [繼續計時]這按鈕, 你應見到數字不會加快, 請你按 [Show flag]這按鈕, 應見到話對盒顯示 flag 變回 1。
1. 這網頁第 4 行有這一句: flag=0 , 這是設定 flag 這變數及將初始值定爲 0, 你也可將初始值定爲 1, 隨後有關的 0 和 1 對調。
2. count( ) 這 function 最後一句是 flag=1 , 因此啓動 count( ) 後, flag 就會變爲 1。
3. [繼續計時] 的按鈕是用來啓動 restart( ), 這 function 有如下設定:
function restart( )
{ if (flag==0)
{ count( ) }
}
這處的 if statement 檢查 flag是否等於 0, 如果 0 就啓動 count(), 如果 1 (即不是 0) 就沒有反應,使用這方法, 若 count( )已在執行中, [繼續計時] 這按鈕不會有做用。
這處的 flag=1設定, 實際設爲 1 或 2 或 3 等數值都是同樣的,只要不是 0 就能夠了, 因此這兩個相對的旗標,看似是 "0" 和 "1", 實際是"0" 和 "non-zero" (非-0)。
4. [中止計時] 的按鈕有如下設定:
onClick="clearTimeout(timeoutID);flag=0"
這是中止 setTimeout( ) 的操做時,同時將 flag 轉回 0, 這使到restart( ) 這function 能夠從新啓動 count()。
- 1. setTimeout的做用以及setTimeout延時0毫秒的做用
- 2. Jquery中使用setInterval和setTimeout
- 3. setTimeout 爲0的做用
- 4. setTimeout(fn, 0) 的做用
- 5. 【jquery的setTimeOut定時器使用】
- 6. 如何在jQuery中使用 setInterval，setTimeout
- 7. setTimeout設置爲0的做用
- 8. 【 js 基礎 】 setTimeout(fn, 0) 的做用
- 9. 深刻理解setTimeout的做用域
- 10. setTimeout延時0毫秒的做用
- 更多相關文章...
- • Spring中Bean的作用域 - Spring教程
- • PHP 可用的函數 - PHP參考手冊
- • C# 中 foreach 遍歷的用法
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。