js的setTimeout方法用處比較多，通常用在頁面刷新了、延遲執行了等等。但是很多javascript新手對setTimeout的用法還是不是很了解。雖然我學習和應用javascript已經兩年多了，但是對setTimeout方法，有時候也要查閱資料。今天對js的setTimeout方法做一個系統地總結。
setInterval與setTimeout的區別
說道setTimeout，很容易就會想到setInterval，因為這兩個用法差不多，但是又有區別，今天一起總結了吧！
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多一些！
setTimeout的用法
讓我們一起來運行一個案例，首先打開記事本，將下面代碼貼入，運行一下效果！
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><h1> <font color=blue> 武林網示范網頁 </font> </h1><p> 請等三秒!</p><script>setTimeout("alert('對不起, 武林網要你等候多時')", 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 = 0function 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=0y=-1function 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（）的用法，相信你都了解了吧！
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 = 0y = 0function 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>尾聲
通過上面的講解，不知道您對setTimeout了解了沒有，下次使用setTimeout會不會很熟練？會不會再把setTimeout和setInterval搞混了？要是您有什么不了解的地方，可以相互交流，共同提高，謝謝！
setTimeout (表達式,延時時間)
setTimeout(表達式,交互時間)
延時時間/交互時間是以豪秒為單位的(1000ms=1s) setTimeout 在執行時,是在載入后延遲指定時間后,去執行一次表達式,僅執行一次
setTimeout 在執行時,它從載入后,每隔指定的時間就執行一次表達式
1，基本用法：
執行一段代碼：
新聞熱點
疑難解答
