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>3、區別
通過上面可以看出，setTimeout和setinterval的最主要區別是：
1）setTimeout只執行一次，也就是說設定的時間到後就觸發執行指定程式碼，執行完後即結束。如果執行的程式碼中再次運行同樣
的setTimeout命令，則可迴圈執行。（即 要迴圈執行，需函式自身再次呼叫 setTimeout()）；而 setinterval是迴圈執行的，即每
到設定時間間隔就觸發指定程式碼。這是真正的定時器。
2）setinterval使用簡單，而setTimeout則比較靈活，可以隨時退出迴圈，而且可以設定為按不固定的時間間隔來執行，比如第
一次1秒，第二次2秒，第三次3秒。