一、JavaScript中settimeout和setinterval的區別是

settimeout只運行一次，也就是說設定的時間到后就觸發運行指定代碼，運行完后即結束。如果運行的代碼中再次運行同樣的settimeout命令，則可循環運行。

setinterval是循環運行的，即每到設定時間間隔就觸發指定代碼。這是真正的定時器。setinterval使用簡單，而settimeout則比較靈活，可以隨時退出循環，而且可以設置為按不固定的時間間隔來運行，比如第一次1秒，第二次2秒，第三次3秒……

1,settimeout詳解

var t = settimeout(“javascript 語句”, 時間參數) 注：時間參數單位為毫秒

示例：var t=settimeout(“alert(’3 seconds!’)”, 3000)

如果js語句帶變量，則必須用+號將變量連接起來，如： var t = settimeout（”document.getelementbyid(“+menuid+”).style.display=’none’”, 3000) cleartimeout詳解

語法：cleartimeout(settimeout的變量名)

示例：cleartimeout(t) //其中t為前面設置的settimeout的變量

使用cleartimeout可以隨時停止計時。

2,setinterval定義和用法

setinterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。

setinterval() 方法會不停地調用函數，直到 clearinterval() 被調用或窗口被關閉。由 setinterval() 返回的 id 值可用作 clearinterval() 方法的參數。

語法 setinterval(code,millisec[,”lang”])

參數 描述 code 必需。要調用的函數或要執行的代碼串。 millisec 必須。周期性執行或調用 code 之間的時間間隔，以毫秒計。

返回值 一個可以傳遞給 window.clearinterval() 從而取消對 code 的周期性執行的值。

例如：

var int=self.setinterval("clock()", 50)      

 function clock(){ var t=new date()        

	  document.getelementbyid("clock").value =t}  



	<...button onclick="int=window.clearinterval(int)">stop interval <.../button>   

二、深度了解settimeout和setinterval的區別

settimeout和setinterval這兩個函數, 大家肯定都不陌生, 但可能并不是每個用過這兩個方法的同學, 都了解其內部的實質。甚至可能會錯誤的把兩個實現定時調用的函數理解成了類似thread一樣的東西, 認為會在一個時間片內, 并發的執行調用的函數, 似乎很好很強大, 但其實并不是如此, 實際的情況是javascript都是以單線程的方式運行于瀏覽器的javascript引擎中的, settimeout和setinterval的作用只是把你要執行的代碼在你設定的一個時間點插入js引擎維護的一個代碼隊列中, 插入代碼隊列并不意味著你的代碼就會立馬執行的,理解這一點很重要. 而且settimeout和setinterval還有點不一樣。

__先談談setTimeout __

假設我們給一個button的onclick事件綁定了此方法, 當我們按下按鈕后, 肯定先執行block1的內容, 然后運行到setTimeout的地方, setTimeout會告訴瀏覽器說, “200ms后我會插一段要執行的代碼給你的隊列中”, 瀏覽器當然答應了(注意插入代碼并不意味著立馬執行), setTimeout代碼運行后, 緊跟其后的block2代碼開始執行, 這里就開始說明問題了, 如果block2的代碼執行時間超過200ms, 那結果會是如何? 或許按照你之前的理解, 會理所當然的認為200ms一到, 你的process代碼會立馬執行…事實是, 在block2執行過程中(執行了200ms后)process代碼被插入代碼隊列, 但一直要等click方法執行結束, 才會執行process代碼段, 從代碼隊列上看process代碼是在click后面的, 再加上js以單線程方式執行, 所以應該不難理解. 如果是另一種情況, block2代碼執行的時間<200ms, setTimeout在200ms后將process代碼插入到代碼隊列, 而那時執行線程可能已經處于空閑狀態了(idle), 那結果就是200ms后, process代碼插入隊列就立馬執行了, 就讓你感覺200ms后, 就執行了.

__再看看setInterval __

這里可能會存在兩個問題:

1.時間間隔或許會跳過 2.時間間隔可能<定時調用的代碼的執行時間

function click() { // code block1... setInterval(function() { // process ... }, 200); // code block2 }

和上面一樣我們假設通過一個click, 觸發了setInterval以實現每隔一個時間段執行process代碼

比如onclick要300ms執行完, block1代碼執行完, 在5ms時執行setInterval, 以此為一個時間點, 在205ms時插入process代碼, click代碼順利結束, process代碼開始執行(相當于圖中的timer code), 然而process代碼也執行了一個比較長的時間, 超過了接下來一個插入時間點405ms, 這樣代碼隊列后又插入了一份process代碼, process繼續執行著, 而且超過了605ms這個插入時間點, 下面問題來, 可能你還會認為代碼隊列后面又會繼續插入一份process代碼…真實的情況是,由于代碼隊列中已經有了一份未執行的process代碼, 所以605ms這個插入時間點將會被”無情”的跳過, 因為js引擎只允許有一份未執行的process代碼, 說到這里不知道您是不是會豁然開朗呢…

為了這種情況你可以用一種更好的代碼形式

setTimeout(function(){    //processing     setTimeout(arguments.callee, interval); }, interval);

這個估計稍微想一下, 就明白其中的好處了, 這樣就不會產生時間點被跳過的問題內容就到這里, 希望能有所幫助, 可能我表達的不是很清楚如果覺得自己英語基礎不錯可以直接看

【注：把代碼里面所有的 ...  刪除掉，防止顯示不了】

上一篇：Javascript的this用法

下一篇：7 個令人驚訝的 JavaScript “特性”