JavaScript中setTimeout()和setInterval()的使用以及區別
今天剛好在看setTimeout()的一個案例,在案例的解析中提到了setTimeout()和setInterval()的使用區別,但是比較理論,所以
決定自己也總結一下,寫寫例子幫助理解一下。
首先是說說這兩個方法的具體時如何使用的。
1、setTimeout()方法
這個方法所有瀏覽器都支援,setTimeout( ) 是屬於 window 的 method, 但我們都是略去 window 這頂層物件名稱, 這是用來
設定一個時間, 時間到了, 就會執行一個指定的 method。
定義和用法: setTimeout()方法用於在指定的毫秒數後呼叫函式或計算表示式。
語法: setTimeout(code,millisec)
引數: code (必需):要呼叫的函式後要執行的 JavaScript 程式碼串。millisec(必需):在執行程式碼前需等待的毫秒數。
提示: setTimeout() 只執行 code 一次。如果要多次呼叫,請使用 setInterval() 或者讓 code 自身再次呼叫 setTimeout()。
看完了基本的語法,接下來我寫一個很簡單的例子說明這個的使用方法。
程式碼如下:
當我們開啟網頁3秒時,就會彈出一個框。但是,只會彈出一次,因為 setTimeout()不會自動重複執行,是在載入後的延遲指定<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1> setTimeout()使用 </h1> <p> 請等待三秒!</p> </body> <script> setTimeout("alert('終於等到你了!')", 3000 ) </script> </html>
時間去執行一次表示式。
當然,我們也可以讓setTimeout()執行函式,而且可以重複執行多次,而不是一次。
程式碼如下:
實現的方法就是讓函式自身反覆呼叫。<!DOCTYPE html> <html> <head> <meta 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>
2、setInterval()方法
setInterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。setInterval() 方法會不停地呼叫函式,直到
clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
語法: setInterval(code,millisec[,"lang"])
引數: code 必需。要呼叫的函式或要執行的程式碼串。millisec 必須。週期性執行或呼叫 code 之間的時間間隔,以毫秒計。
返回值: 一個可以傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。
如果我們想要每隔3秒就彈出一個框要如何實現呢?
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
function test(){
this.name = "setInternal";
this.waitMes = function(){
var that = this;
setInterval(function(){
alert(that.name);
},3000);
}
}
var te = new test();
te.waitMes();
</script>
</html>
setInterval() 從載入後,每隔指定的時間就執行一次表示式。3、區別
通過上面可以看出,setTimeout和setinterval的最主要區別是:
1)setTimeout只執行一次,也就是說設定的時間到後就觸發執行指定程式碼,執行完後即結束。如果執行的程式碼中再次運行同樣
的setTimeout命令,則可迴圈執行。(即 要迴圈執行,需函式自身再次呼叫 setTimeout());而 setinterval是迴圈執行的,即每
到設定時間間隔就觸發指定程式碼。這是真正的定時器。
2)setinterval使用簡單,而setTimeout則比較靈活,可以隨時退出迴圈,而且可以設定為按不固定的時間間隔來執行,比如第
一次1秒,第二次2秒,第三次3秒。