一、JavaScript中settimeout和setinterval的區(qū)別是

settimeout只運(yùn)行一次，也就是說(shuō)設(shè)定的時(shí)間到后就觸發(fā)運(yùn)行指定代碼，運(yùn)行完后即結(jié)束。如果運(yùn)行的代碼中再次運(yùn)行同樣的settimeout命令，則可循環(huán)運(yùn)行。

setinterval是循環(huán)運(yùn)行的，即每到設(shè)定時(shí)間間隔就觸發(fā)指定代碼。這是真正的定時(shí)器。setinterval使用簡(jiǎn)單，而settimeout則比較靈活，可以隨時(shí)退出循環(huán)，而且可以設(shè)置為按不固定的時(shí)間間隔來(lái)運(yùn)行，比如第一次1秒，第二次2秒，第三次3秒……

1,settimeout詳解

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

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

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

語(yǔ)法：cleartimeout(settimeout的變量名)

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

使用cleartimeout可以隨時(shí)停止計(jì)時(shí)。

2,setinterval定義和用法

setinterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。

setinterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearinterval() 被調(diào)用或窗口被關(guān)閉。由 setinterval() 返回的 id 值可用作 clearinterval() 方法的參數(shù)。

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

參數(shù) 描述 code 必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。 millisec 必須。周期性執(zhí)行或調(diào)用 code 之間的時(shí)間間隔，以毫秒計(jì)。

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

例如：

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的區(qū)別

settimeout和setinterval這兩個(gè)函數(shù), 大家肯定都不陌生, 但可能并不是每個(gè)用過(guò)這兩個(gè)方法的同學(xué), 都了解其內(nèi)部的實(shí)質(zhì)。甚至可能會(huì)錯(cuò)誤的把兩個(gè)實(shí)現(xiàn)定時(shí)調(diào)用的函數(shù)理解成了類似thread一樣的東西, 認(rèn)為會(huì)在一個(gè)時(shí)間片內(nèi), 并發(fā)的執(zhí)行調(diào)用的函數(shù), 似乎很好很強(qiáng)大, 但其實(shí)并不是如此, 實(shí)際的情況是javascript都是以單線程的方式運(yùn)行于瀏覽器的javascript引擎中的, settimeout和setinterval的作用只是把你要執(zhí)行的代碼在你設(shè)定的一個(gè)時(shí)間點(diǎn)插入js引擎維護(hù)的一個(gè)代碼隊(duì)列中, 插入代碼隊(duì)列并不意味著你的代碼就會(huì)立馬執(zhí)行的,理解這一點(diǎn)很重要. 而且settimeout和setinterval還有點(diǎn)不一樣。

__先談?wù)剆etTimeout __

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

__再看看setInterval __

這里可能會(huì)存在兩個(gè)問(wèn)題:

1.時(shí)間間隔或許會(huì)跳過(guò) 2.時(shí)間間隔可能<定時(shí)調(diào)用的代碼的執(zhí)行時(shí)間

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

和上面一樣我們假設(shè)通過(guò)一個(gè)click, 觸發(fā)了setInterval以實(shí)現(xiàn)每隔一個(gè)時(shí)間段執(zhí)行process代碼

比如onclick要300ms執(zhí)行完, block1代碼執(zhí)行完, 在5ms時(shí)執(zhí)行setInterval, 以此為一個(gè)時(shí)間點(diǎn), 在205ms時(shí)插入process代碼, click代碼順利結(jié)束, process代碼開(kāi)始執(zhí)行(相當(dāng)于圖中的timer code), 然而process代碼也執(zhí)行了一個(gè)比較長(zhǎng)的時(shí)間, 超過(guò)了接下來(lái)一個(gè)插入時(shí)間點(diǎn)405ms, 這樣代碼隊(duì)列后又插入了一份process代碼, process繼續(xù)執(zhí)行著, 而且超過(guò)了605ms這個(gè)插入時(shí)間點(diǎn), 下面問(wèn)題來(lái), 可能你還會(huì)認(rèn)為代碼隊(duì)列后面又會(huì)繼續(xù)插入一份process代碼…真實(shí)的情況是,由于代碼隊(duì)列中已經(jīng)有了一份未執(zhí)行的process代碼, 所以605ms這個(gè)插入時(shí)間點(diǎn)將會(huì)被”無(wú)情”的跳過(guò), 因?yàn)閖s引擎只允許有一份未執(zhí)行的process代碼, 說(shuō)到這里不知道您是不是會(huì)豁然開(kāi)朗呢…

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

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

這個(gè)估計(jì)稍微想一下, 就明白其中的好處了, 這樣就不會(huì)產(chǎn)生時(shí)間點(diǎn)被跳過(guò)的問(wèn)題內(nèi)容就到這里, 希望能有所幫助, 可能我表達(dá)的不是很清楚如果覺(jué)得自己英語(yǔ)基礎(chǔ)不錯(cuò)可以直接看

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

上一篇：Javascript的this用法

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