JavaScript中setTimeout()的具體用法
setTimeout( ) 是屬於 window 的 方法, 但我們都是略去 window 這頂層容器名稱, 這是用來設定一個時間, 時間到瞭, 就會執行一個指定的 method
請先看以下一個簡單, 這是沒有實際用途的例子, 隻是用來示范 setTimeout( ) 的語法。
1、setTimeout( ) 語法例子
<html> <body text=red> <h1> <font color=blue> 示范網頁 </font> </h1> <p> </br> <p> 請等三秒鐘! <script> setTimeout("alert('對不起, 三秒鐘已到')", 3000 ) </script> </body> </html>
2. 留意網頁開啟後三秒, 就會出現一個 alert 對話盒。
setTimeout( )是設定一個指定等候時間 (單位是千分之一秒, millisecond), 時間到瞭, 瀏覽器就會執行一個指定的 method 或 function, 有以下語法:
setTimeout(code, milliseconds, param1, param2, ...) setTimeout(function, milliseconds, param1, param2, ...)
code/function:必需。要調用一個代碼串,也可以是一個函數。
milliseconds:可選。執行或調用 code/function 需要等待的時間,以毫秒計。默認為 0。
param1, param2, … : 可選。 傳給執行函數的其他參數(IE9 及其更早版本不支持該參數)。
這次例子是設定等待 3 秒 (3000 milliseconds), 瀏覽器就會執行 alert( ) 這一個method,註意這個函數可以由我們自己重新書寫。下面就來看一看調用function的方式
<html> <head></head> <body text="red"> <h1><font color="blue"> 示范網頁 </font></h1> <script> // setTimeout("alert('出窗')",3000 ); setTimeout("changeState()",3000 ); function changeState(){ // alert("彈出"); let content=document.getElementById('content'); content.innerHTML="<div>這是三秒鐘之後</div>"; } </script> <p id="content"> 請等三秒鐘!</p> </body> </html>
以上這段代碼是實現一個在3秒鐘之後進行更換文本的內容,在更換內容的時候調用瞭方法changeState()方法
3、有瞭以上基礎,我們可以實現一個自動運行的按照時間遞加的計數器,如下面所示代碼:
<html> <body text=red> <h1><font color=blue> 示范網頁 </font></h1> <script> var x=0; function changeState(){ x=x+1; //註意這裡的調用方式,使用引號包圍 setTimeout("changeState()",1000 ); let content=document.getElementById('content'); content.innerHTML=x; console.log(x); } </script> <button onclick="changeState()">開始計時</button> <p>已運行時間</p> <p id="content"></p> </body> </html>
在上面代碼中,當點擊按鈕啟動changeState( )後, 就會啟動 setTimeout( ), 這個 method 在一秒後又啟動 changeState( ), changeState( )啟動後又啟動 setTimeout( ) , 所以得出的結果是 changeState( )每秒執行一次,繼而實現數值的遞增。
雖然實現瞭數值的遞增,但是當我們連續點擊按鈕時,你會發現,數值的增加不是按照1秒增加的(小於1秒),下面,我們進行一些限制條件,比如限制x<60,然後重新開始,在其他位進1,也就是實現鐘表計時功能,如下面代碼:
<html> <body text=red> <h1><font color=blue> 示范網頁 </font></h1> <script> var x=00; var y=00; var z=00; function changeState(){ if(x<=59&&x>=0 && y<=59 && y>=0 && z<=59 && z>=0){ //註意這裡的調用方式,使用引號包圍 let content=document.getElementById('content'); content.innerHTML=z+":"+y+":"+x; console.log(x); x=x+1; }else if(y<=59 && y>=0 && z<=59 && z>=0){ y=y+1; x=0; } else if (z<=59 && z>=0) { z=z+1; y=0; x=0; } setTimeout("changeState()",1000 ); } </script> <button onclick="changeState()">開始計時</button> <p>已運行時間</p> <p id="content"></p> </body> </html>
實現效果如下所示:
3、既然有開始計時,那麼想當然就要有停止計時,那麼就需要知道這個函數——clearTimeout( )
有些好奇寶寶就會問瞭,為什麼會有停止呢?什麼場景會需要停止呢?
比如,當我們做瞭某項操作後,而這個操作會在幾秒鐘後延遲執行,但是我們在關閉頁面後,我們可能就不需要在執行這個操作瞭,所以我們可以在關閉頁面或者卸載組件的時候,將這個延遲時間取消掉。
setTimeout( ) 來使到瀏覽器不斷執行一個 function, 當一個 setTimeout( ) 開始瞭循環的工作, 我們要使它停下來, 可使用 clearTimeout( ) 這 method。
clearTimout( ) 有以下語法: clearTimeout(timeoutID)
要使用 clearTimeout( ), 我們設定 setTimeout( ) 時, 要給予這 setTimout( ) 一個名稱, 這名稱就是 timeoutID , 我們叫停時, 就是用這 timeoutID來叫停, 這是一個自定義名稱,。
如下:
timeoutID
↓
meter1 =setTimeout("count1()", 1000)
meter2 =setTimeout("count2()", 1000)
使用這 meter1 及 meter2 這些 timeoutID 名稱, 在設定 clearTimeout( ) 時, 就可指定對哪一個 setTimeout( ) 有效, 不會擾及另一個 setTimeout( ) 的操作。
如下所示,停止的語句(註意:count1(),count2()分別是計時開始的方法,而meter1,meter2分別是setTimeout的定義)
<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 /> </p> <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> </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>
4、設置點擊一次標志— Set flag
前個練習說到我們用一個按鈕來啟動一個 function, 每按一下就會啟動這 function 一次, 請看以下例子。
在這例子有以下設定:
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), 就產生另一個作用。
練習—隻可開啟一次的 function
這練習是將上個練習加多一個 flag, 使到每次隻能有一個 count( ) 這 function 在進行。
以下內容:
<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 /> </p> <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> </p> <form> <input type="button" value="Show flag" onclick="alert('The flag now is '+ flag)" /> </form> </body> </html>
效果說明:
1. 在網頁中, 你應該能看到三個按鈕及文字框中的數字跳動。
2. 請你按 [Show flag]這按鈕, 應見到一個話對盒顯示 flag 是 1。
3. 請你按 [停止計時]這按鈕, 數字停止跳動, 請你按 [Show flag] 這按鈕, 應見到話對盒顯示 flag 是 0。
4. 請你按多次 [繼續計時]這按鈕, 你應見到數字不會加快, 請你按 [Show flag]這按鈕, 應見到話對盒顯示 flag 變回 1。
代碼解析:
1. 這網頁第 5行有這一句: 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()。
註意:下面方法是定時作用,能夠按照一定的時間執行相同的操作setInterval
let i =0; setInterval(() => { console.log(i++); },1500);//1000為1秒鐘
在上面代碼中,每隔1.5秒就會有一次打印,對於這個方法,同樣能夠實現上面操作中的始終功能,並且代碼更加簡單.
應該值得註意的是: setTimeout 也有個小細節,第二個參數設置為 0 也許會有人認為這樣就不是異步瞭,其實還是異步。這是因為 HTML5 標準規定這個函數第二個參數不得小於 4 毫秒,不足會自動增加。
到此這篇關於JavaScript中setTimeout()的具體用法 的文章就介紹到這瞭,更多相關JavaScript setTimeout()內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- javascript的setTimeout()使用方法總結
- js實現網頁計算器
- HTML頁面中使用Vue實例進階(快速學會上手Vue)
- JavaScript代碼實現簡單計算器
- Web網絡安全漏洞分析DOM型XSS攻擊原理