在製作網頁動態效果時，一定會遇到某些需求，要求某段程式等待多時時間後再開始執行，就像在我們的生活中一樣，待會兒再開始做一件事。在JavaScript中主要通過定時器實現此類需求，本文將對定時器做一個概括，正對setTimeout()做一個詳細用法總結。 一.setInterval與setTimeou ...
在製作網頁動態效果時，一定會遇到某些需求，要求某段程式等待多時時間後再開始執行，就像在我們的生活中一樣，待會兒再開始做一件事。在JavaScript中主要通過定時器實現此類需求，本文將對定時器做一個概括，正對setTimeout()做一個詳細用法總結。
一.setInterval與setTimeout的區別
setInterval
setInterval()方法可按照指定的周期來調用函數或者計算表達式（以毫秒為單位）
語法：
setInterval(函數表達式，毫秒數)；
setInterval()會不停的調用函數，直到clearInterval()被調用或者視窗被關閉，由 setInterval()返回的ID值可用作clearInterval()方法的參數。
setTimeout
setTimeout()方法用於在指定毫秒數後再調用函數或者計算表達式（以毫秒為單位）
語法：
setTimeout(函數表達式，毫秒數)；
setTimeout()只執行函數一次，如果需要多次調用可以使用setInterval(),或者在函數體內再次調用setTimeout()
區別
通過以上分析可以看出，setTimeout與setInterval的主要區別是:
setTimeout()方法只運行一次，也就是說當達到設定的時間後就出發運行指定的代碼，運行完後就結束了，如果還想再次執行同樣的函數，可以在函數體內再次調用setTimeout()，可以達到迴圈調用的效果。
setInterval()是迴圈執行的，即每達到指定的時間間隔就執行相應的函數或者表達式，是真正的定時器。
二.setTimeout()的用法
先寫個最簡單的demo，如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script>
6 setTimeout("alert('hello')",2000);
7 </script>
8 </head>
9 <body>
10 </body>
11 </html>
頁面會在停留2秒之後彈出對話框,註意setTimeout不會自動重覆執行！
當然，setTimeout也可以執行function，還可以不斷重覆執行！
你可以看到h1中的文本數字在一秒一秒地遞增！
更加靈活的是，你還可以指定重覆執行的次數，如下：
if判斷中的數字，是用來限制重覆執行次數的條件。
三.clearTimeout()
要使用clearTimeout()，需要我們設定setTimeout()時， 給予這setTimeout()一個名稱, 這名稱就是timeoutID ，我們叫停時，就是用這 timeoutID 來叫停
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <script>
6 var timeId= setTimeout("alert('hello')",2000);
7 clearTimeout(timeId);
8 </script>
9 </head>
10 <body>
11 </body>
12 </html>
原計劃1秒後彈出的警示框，被自然叫停了。
