javascript的setTimeout()使用方法總結
1、前言
js
的setTimeout
方法用處比較多,通常用在頁面刷新瞭、延遲執行瞭等等。但是很多javascript新手對setTimeout的用法還是不是很瞭解。雖然我學習和應用javascript
已經兩年多瞭,但是對setTimeout
方法,有時候也要查閱資料。今天對js的setTimeout
方法做一個系統地總結。
2、setInterval與setTimeout的區別
說道setTimeout
,很容易就會想到setInterval
,因為這兩個用法差不多,但是又有區別,今天一起總結瞭吧!
3、setTimeout
定義和用法: setTimeout()
方法用於在指定的毫秒數後調用函數或計算表達式。
語法: setTimeout(code,millisec)
參數: code (必需):要調用的函數後要執行的 JavaScript
代碼串。millisec
(必需):在執行代碼前需等待的毫秒數。
提示: setTimeout() 隻執行 code 一次。如果要多次調用,請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。
setInterval:
setInterval()
方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。
setInterval()
方法會不停地調用函數,直到 clearInterval()
被調用或窗口被關閉。由 setInterval() 返
回的 ID 值可用作 clearInterval()
方法的參數。
語法: setInterval(code,millisec[,"lang"])
參數: code
必需。要調用的函數或要執行的代碼串。millisec
必須。周期性執行或調用 code
之間的時間間隔,以毫秒計。
返回值: 一個可以傳遞給 Window.clearInterval()
從而取消對 code
的周期性執行的值。
區別:
通過上面可以看出,setTimeout
和setinterval
的最主要區別是:
setTimeout
隻運行一次,也就是說設定的時間到後就觸發運行指定代碼,運行完後即結束。如果運行的代碼中再次運行同樣的setTimeout
命令,則可循環運行。(即 要循環運行,需函數自身再次調用 setTimeout()
)
而 setinterval
是循環運行的,即每到設定時間間隔就觸發指定代碼。這是真正的定時器。
setinterval
使用簡單,而setTimeout
則比較靈活,可以隨時退出循環,而且可以設置為按不固定的時間間隔來運行,比如第一次1秒,第二次2秒,第三次3秒。
我個人而言,更喜歡用setTimeout多一些!
4、setTimeout的用法
讓我們一起來運行一個案例,首先打開記事本,將下面代碼貼入,運行一下效果!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1> <font color=blue> haorooms博客示范網頁 </font> </h1> <p> 請等三秒!</p> <script> setTimeout("alert('對不起, haorooms博客要你等候多時')", 3000 ) </script> </body> </html>
頁面會在停留三秒之後彈出對畫框!這個案例應用瞭setTimeout
最基本的語法,setTimeout
不會自動重復執行!
setTimeout
也可以執行function
,還可以不斷重復執行!
我們再來一起做一個案例:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> var x = 0 function countSecond() { x = x+1 document.haorooms.haoroomsinput.value=x setTimeout("countSecond()", 1000) } </script> </head> <html> <body> <form name="haorooms"> <input type="text" name="haoroomsinput"value="0" size=4 > </form> <script> countSecond() </script> </body> </html>
我們可以看到input
文本框中的數字在一秒一秒的遞增!所以,setTimeout
也可以制作網頁中的時間跳動!
沒有案例,學習起來不會很快,我們再來一起做一個例子,計算你在haorooms
某個頁面的停留時間:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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> <table> <tr valign=top> <td> 你在haorooms博客中的停留時間是: </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>
怎麼樣,通過上面的例子,對setTimeout()
的用法,相信你都瞭解瞭吧!
5、clearTimeout( )
我們再來一起看一下 clearTimeout( )
,
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( ) 的操作。
下面請看 clearTimeout()的案例;
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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> <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>
6、結尾
到此這篇關於javascript的setTimeout()使用方法總結的文章就介紹到這瞭,更多相關javascript的setTimeout()用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JavaScript中setTimeout()的具體用法
- JavaScript 定時器詳情
- 詳解JavaScript的定時器
- javascript實現簡單頁面倒計時
- Web網絡安全漏洞分析DOM型XSS攻擊原理