js中的SetTimeOut
1. SetTimeOut()
???????????? 1.1 SetTimeOut()語法例子
???????????? 1.2 用SetTimeOut()執(zhí)行Function
???????????? 1.3 SetTimeOut()語法例子
???????????? 1.4 設定條件使SetTimeOut()停止
???????????? 1.5 計分及秒的counter
?? 2. ClearTimeout()
?? 3. Set Flag??
1．setTimeout( )
setTimeout( ) 是屬于 window 的 method, 但我們都是略去 window 這頂層對象名稱, 這是用來設定一個時間, 時間到了, 就會執(zhí)行一個指定的 method。請先看以下一個簡單, 這是沒有實際用途的例子, 只是用來示范 setTimeout( ) 的語法。
1. setTimeout( ) 語法例子
例子： 等候三秒才執(zhí)行的 alert( )
alert 對話盒, 一般是用按鈕叫出來, 在這例子, 你會看到網(wǎng)頁開啟后 3 秒, 就會自動出現(xiàn)一個 alert 對話盒。
1. 請用瀏覽器開啟示范，以下內(nèi)容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范網(wǎng)頁 </font> </h1> <p> </br>
<p> 請等三秒!
<script>
setTimeout("alert('對不起, 要你久候')", 3000 )
</script>
</body> </html>
2. 留意網(wǎng)頁開啟后三秒, 就會出現(xiàn)一個 alert 對話盒。
setTimeout( ) 是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到了, 瀏覽器就會執(zhí)行一個指定的 method 或 function, 有以下語法:
例子是設定等 3 秒 (3000 milliseconds), 瀏覽器就會執(zhí)行 alert( ) 這一個method。
2. 用 setTimeout( ) 來執(zhí)行 function
setTimeout( ) 通常是與 function 一起使用, 以下是一個較上個練習復雜的例子。
例子： 狀態(tài)欄中自動消失的文字
你看過如何用按鈕在狀態(tài)欄顯示文字, 然后再用按鈕消除文字, 在這練習, 你看到如何用按鈕在狀態(tài)欄顯示文字, 而這文字會在三秒后自動消失。
1. 請用瀏覽器開啟示范，以下內(nèi)容:
<html> <body bgcolor=lightcyan text=red>
<h1> <font color=blue> 示范網(wǎng)頁 </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. 請在按鈕上單擊, 你應見到狀態(tài)欄出現(xiàn) Hello 這字, 留意過了三秒, 這字就會消失。
1. 這處先設定一個名為 clearWord( ) 的 function, 作以下定義:
window.status=""
這是用來消除狀態(tài)欄的文字, 瀏覽器執(zhí)行 clearWord( ) , 就會消除狀態(tài)欄的文字。
2.按鈕設定了啟動以下兩項工作, 用 ， 分隔, 瀏覽器會順序執(zhí)行這兩項工作:
onClick="window.status='Hello' , setTimeout('clearWord( )', 3000) "
3. setTimeout( ) 以下設定:
這是設定等 3 秒 (3000 milliseconds) 瀏覽器就會執(zhí)行 clearWord( ) 這一個function。
你看過如何使到父窗口開啟時自動開啟一個子窗口, 若觀看者不關(guān)閉這子窗口, 這子窗口就會一路開啟。看過以上的練習, 請你設計一個會開啟子窗口的網(wǎng)頁, 而這子窗口在開啟后兩秒, 就會自動關(guān)閉。
3. 不斷重復執(zhí)行的 setTimeout( )
setTimeout( ) 預設只是執(zhí)行一次, 但我們可以使用一個循環(huán)方式, 使到一個setTimeout( ) 再啟動自己一次, 就會使到第二個 setTimeout( ) 執(zhí)行, 第二個又啟動第三個, 這樣循環(huán)下去, 這 setTimeout( ) 就會不斷執(zhí)行。
例子： 自動每秒加 1 的 function
你看到如何使用 setTimeout( ) 令文字框的數(shù)值每秒就加 1, 當然你也可以設定其他遞增的速度, 例如每五秒就加 5, 或每五秒就加 1。
1. 請用瀏覽器開啟示范，以下內(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)頁開啟后, 請你留意文字框中的數(shù)值轉(zhuǎn)變。
3. 請你更改一些設定, 例如 x = x+5, 或?qū)⒌群驎r間改為5000, 看有什么反應。
1. 這網(wǎng)頁有兩個 script, 第一個是設定 countSecond( ) 這個 function, 第二個在后的是在網(wǎng)頁完全加載后, 就啟動這 function。
2. 留意今次以下的設定:
function countSecond( )
{ x = x+1
document.fm.displayBox.value = x
setTimeout("countSecond( )", 1000)
}
當 countSecond( ) 啟動后, 就會啟動 setTimeout( ), 這個 method 在一秒后又啟動 countSecond( ), countSecond( ) 啟動后又啟動 setTimeout( ) , 所以得出的結(jié)果是 countSecond( ) 每秒執(zhí)行一次。
3. 在 JavaScript, 我們是使用這處說的方法使到一些事項不斷執(zhí)行, 其中一個用途是顯示轉(zhuǎn)動時間, 另一個用途是設定跑動文字, 隨后會有例子。
用上述的方法設定時間, setTimeout( ) 雖然設定了是一秒, 但瀏覽器還有另外兩項功能要執(zhí)行, 所以一個循環(huán)的時間是稍多于一秒, 例如一分鐘可能只有58 個循環(huán)。
4.設定條件使 setTimeout( ) 停止
setTimeout( ) 的循環(huán)開始后, 就會不斷重復, 在上個練習, 你看到文字框的數(shù)字不斷跳動, 但我們是有方法使到數(shù)字跳到某一個數(shù)值就停下來, 其中一個方法是用 if...else 設定一個條件, 若是 TRUE 就繼續(xù)執(zhí)行 setTimeout( ) , 若是 FALSE 就停止。
例如要使到上個練習的 counter 跳到 20 就停下, 可將有關(guān)的 function 作以下的更改。
function countSecond( )
{ if ( x < 20 )
{ x = x + 1
document.displaySec.displayBox.value = x
setTimeout("countSecond( )", 1000)
??? }
}
5. 計分及計秒的 counter
在前面的練習, 相信你已學識如何使用 setTimeout( ), 現(xiàn)在請你看一個較復習的例子。
例子： 計時的 counter
在這練習, 你要設定兩個文字框, 一個顯示分鐘, 另一個顯示秒, 網(wǎng)頁開啟后, 就會在這兩個文字框中自動計時。
1. 請用瀏覽器開啟示范，以下內(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=lightcyan text=red> <p> </br>
<table> <tr valign=top> <td> 你在本網(wǎng)頁的連接時間是: </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. 請你留意兩個文字框中的數(shù)字轉(zhuǎn)變。
1. 這網(wǎng)頁有兩個 function, 一個用來計分鐘, 一個用來計秒。在這處, 只是示范setTimeout( ) 的操作, 因為定時器有其他更精簡的寫法。(留意: 這方式的計時并不準確。)
2. 留意計秒的 function:
function countSec( )
{ x = x + 1
z = x % 60
document.displaySec.displayBox.value=z
setTimeout("countSec( )", 1000)
}
這處的 % 符號是 modulus (余數(shù)), 例如 z = x % 60 表示先進行 x / 60, 得出的余數(shù)作為 z 這變量, 例如 82 秒, modulus 就是 22, 所以文字框會顯示 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)
}
--------------------------------------------------------------------
1.2 clearTimeout( )
在前一節(jié), 你看過如何使用 setTimeout( ) 來使到瀏覽器不斷執(zhí)行一個 function, 當一個 setTimeout( ) 開始了循環(huán)的工作, 我們要使它停下來, 可使用 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( ) 的操作。
例子： 可停止的 setTimeout( )
作了兩個改變: (1) 有兩個 setTimeout( ), (2) 有兩個按鈕, 分別可停止這兩個 setTimout( )。
1. 請用瀏覽器開啟示范磁盤中的 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=lightcyan text=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="繼續(xù)計時" 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="繼續(xù)計時" onClick="count2( ) " >
</form>
<script>
count1( )
count2( )
</script>
</body> </html>
2. 留意網(wǎng)頁中的兩個文字框及內(nèi)里變動的數(shù)字, 每個文字框旁有兩個按鈕, 請你試試兩個按鈕的反應。
3. 請你連續(xù)按多次 [繼續(xù)計時] 的按鈕, 留意數(shù)值的跳動加快了, 原因是每按一次就啟動 function 一次, 每個 function 都令數(shù)值跳動, 例如啟動同一的 function 四次, 就會一秒跳四次。(請看下一節(jié))
--------------------------------------------------------------------
1.3 Set flag
前個練習說到我們用一個按鈕來啟動一個 function, 每單擊就會啟動這 function 一次, 請看以下例子。
例子： 效果重復的 setTimeout( )
只有一個定時器, 筆者想示范的是每按 [繼續(xù)計時] 一次, 就會啟動 count( ) 這 function 一次。
1. 請用瀏覽器開啟示范，以下內(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=lightcyan text=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="繼續(xù)計時" onClick="count( ) " >
</form> <p>
<script>
count( )
</script>
</body> </html>
2. 網(wǎng)頁開啟后, 你應見到文字框中的數(shù)字跳動, 請你按四次 [繼續(xù)計時], 留意這會加快數(shù)字跳動, 原因是有關(guān)的 function 被開啟了多個, 每個都會使數(shù)字轉(zhuǎn)變。
3. 按了四次 [繼續(xù)計時] 的按鈕后, 請你按 [停止計時] 的按鈕, 你會發(fā)現(xiàn)要按五次才能停止數(shù)字跳動。
在編寫程序時, 我們常要提防使用者作出一些特別動作, 例如使用者按兩次 [繼續(xù)計時] 按鈕, 這定時器就失準了。我們是否有辦法使到一個按鈕被按一次就失效呢? 這就不會產(chǎn)生重復效果。
藉這處的例子 (隨后還有多個例子), 解說程序中一個 set flag (設定旗標) 的概念, flag 是一個記認, 一般來說, 這可以是 0 或是 1 (也可用 on 或 off, 或任何兩個自選的名稱或數(shù)字), 但也可以是 2、3、4 或更大的數(shù)字, 在這例子有以下設定:
1. 程序開啟時 flag=0。
2. 當 counter( ) 執(zhí)行時會順便將 flag 變?yōu)?1。
3. 在 [繼續(xù)計時] 這按鈕的反應中, 會先檢查 flag 是 0 或是 1, 若是 0 就會產(chǎn)生作用, 若是 1 就沒有反應。
4. 使用這 flag 的方式, count( ) 這 function 開啟后, [繼續(xù)計時] 這按鈕就沒有作用。
這處的 flag 是一個變量, 可任意取名, 我們用 flag來稱呼這變量的原因, 是因為這變量好處一支旗, 將旗豎起 (flag is on), 就會產(chǎn)生一個作用, 將旗放下 (flag is off), 就產(chǎn)生另一個作用。
例子： 只可開啟一次的 function
這練習是將上個練習加多一個 flag, 使到每次只能有一個 count( ) 這 function 在進行。
1. 請用瀏覽器開啟示范，以下內(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=lightcyan text=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="繼續(xù)計時" 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)頁中, 你應見到三個按鈕及文字框中的數(shù)字跳動。
3. 請你按 [Show flag] 這按鈕, 應見到一個話對盒顯示 flag 是 1。
4. 請你按 [停止計時] 這按鈕, 數(shù)字停止跳動, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 是 0。
5. 請你按多次 [繼續(xù)計時] 這按鈕, 你應見到數(shù)字不會加快, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 變回 1。
1. 這網(wǎng)頁第 4 行有這一句: flag=0 , 這是設定 flag 這變量及將初始值定為 0, 你也可將初始值定為 1, 隨后有關(guān)的 0 和 1 對調(diào)。
2. count( ) 這 function 最后一句是 flag=1 , 所以啟動 count( ) 后, flag 就會變?yōu)?1。
3. [繼續(xù)計時] 的按鈕是用來啟動 restart( ), 這 function 有以下設定:
function restart( )
{ if (flag==0)
{ count( ) }
}
這處的 if statement 檢查 flag 是否等于 0, 若是 0 就啟動 count( ), 若是 1 (即不是 0) 就沒有反應, 使用這方法, 若 count( ) 已在執(zhí)行中, [繼續(xù)計時] 這按鈕不會有作用。
這處的 flag=1 設定, 實際設為 1 或 2 或 3 等數(shù)值都是一樣的, 只要不是 0 就可以了, 所以這兩個相對的旗標, 看似是 "0" 和 "1", 實際是 "0" 和 "non-zero" (非-0)。
4. [停止計時] 的按鈕有以下設定:
onClick="clearTimeout(timeoutID); flag=0 "
這是停止 setTimeout( ) 的操作時, 同時將 flag 轉(zhuǎn)回 0, 這使到 restart( ) 這 function 可以重新啟動 count( )。
?
====================================================================
*****續(xù)集****
====================================================================
?
setTimeout(表達式,延遲時間); 單位:ms(毫秒)；1s=1000ms;
setInterval(表達式,交互時間); 單位:ms(毫秒)；1s=1000ms;
window.setTimeout()
在執(zhí)行時，它從載入后延遲指定的時間去執(zhí)行一個表達式或者是函數(shù);僅執(zhí)行一次;和window.clearTimeout一起使用.
window.setInterval()
在執(zhí)行時,它從載入頁面后每隔指定的時間執(zhí)行一個表達式或者是函數(shù);(功能類似于遞歸函數(shù))；和window.clearInterval一起使用.
1，基本用法：
執(zhí)行一段代碼： var i=0;
setTimeout("i+=1;alert(i)",1000);
執(zhí)行一個函數(shù)：
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);
//注意比較上面的兩種方法的不同。
下面再來一個執(zhí)行函數(shù)的：
var i=0;
function test(){
i+=1;
alert(i);
}
setTimeout("test()",1000);
也可以這樣：
setTimeout(test,1000);
總結(jié)：
setTimeout的原型是這樣的：
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
setTimeout有兩種形式
setTimeout(code,interval)
setTimeout(func,interval,args)
其中code是一個字符串
func是一個函數(shù).
注意"函數(shù)"的意義,是一個表達式,而不是一個語句.
比如你想周期性執(zhí)行一個函數(shù)
function a(){//...}
可寫為
setInterval("a()",1000)或
setInterval(a,1000)
這里注意第二種形式中,是a,不要寫成a(),切記!!!
展開來說,不管你這里寫的是什么,如果是一個變量,一定是一個指向某函數(shù)的變量;如果是個函數(shù),那它的返回值就 要是個函數(shù)
2,用setTimeout實現(xiàn)setInterval的功能
思路很簡單，就是在一個函數(shù)中調(diào)用不停執(zhí)行自己，有點像遞歸
var i=0;
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout("xilou()",1000);
//用這個也可以
//setTimeout(xilou,1000);
}
3,在類中使用setTimeout
終于到正題了，其實在類中使用大家遇到的問題都是關(guān)于this的，只要解決了這個this的問題就萬事無憂了。
呵呵。讓我們來分析一下：
function xilou(){
this.name="xilou";
this.sex="男";
this.num=0;
}
xilou.prototype.count=function(){
this.num+=1;
alert(this.num);
if(this.num>10){return;}
//下面用四種方法測試,一個一個輪流測試。
setTimeout("this.count()",1000);//A:當下面的x.count()調(diào)用時會發(fā)生錯誤：對象不支持此屬性或方法。
setTimeout("count()",1000);//B:錯誤顯示：缺少對象
setTimeout(count,1000);//C:錯誤顯示：'count'未定義
//下面是第四種 by 西樓冷月 www.chinacms.org
var self=this;
setTimeout(function(){self.count();},1000);//D:正確
}
var x=new xilou();
x.count();
錯誤分析：
A：中的this其實指是window對象，并不是指當前實例對象
B：和C：中的count()和count其實指的是單獨的一個名為count()的函數(shù),但也可以是window.count(),因為window.count()可以省略為count()
D：將變量self指向當前實例對象，這樣js解析引擎就不會混肴this指的是誰了。
話說回來，雖然我們知道setTimeout("this.count()",1000)中的this指的是window對象，但還是不明白為什么會是
window對象^_^(有點頭暈...)
那我們可以想象一下這個setTimeout是怎樣被定義的：
setTimeout是window的一個方法，全稱是這樣的：window.setTimeout()
那應該是這樣被定義的：
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....代碼
return timer//返回一個標記符
}
所以當向setTimeout()傳入this的時候，當然指的是它所屬的當前對象window了
總結(jié)
以上是生活随笔為你收集整理的js中的SetTimeOut的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MYSQL 取中位数
- 下一篇： jQuery 3.0的domManip浅