setTimeout
setTimeout的在一段時(shí)間之后，執(zhí)行指定的一段函數(shù) （僅執(zhí)行一次）
可以理解為指定延遲后執(zhí)行函數(shù)
setInterval
setInterval是循環(huán)執(zhí)行函數(shù)，每隔一段時(shí)間就執(zhí)行一次指定的函數(shù)（執(zhí)行N次）
可以理解為指定周期執(zhí)行函數(shù)
兩個(gè)函數(shù)的另一個(gè)區(qū)別在于，setInterval的時(shí)間間隔是相對(duì)于其指定執(zhí)行函數(shù)的開(kāi)始時(shí)間的，它并不會(huì)考慮指定函數(shù)的執(zhí)行時(shí)間，也就是說(shuō)，當(dāng)指定函數(shù)的執(zhí)行時(shí)間大于setInterval的間隔時(shí)間時(shí)，會(huì)出現(xiàn)不同的表現(xiàn)。
舉例來(lái)說(shuō)
當(dāng)我們執(zhí)行下面這段代碼
setInterval(function () {
func(i++);}, 100)
如果 func的執(zhí)行時(shí)間小于100秒，那么很簡(jiǎn)單，函數(shù)會(huì)按照下圖執(zhí)行
圖片.png
但是如果函數(shù) func的執(zhí)行時(shí)間大于100秒，那么變回造成執(zhí)行函數(shù)間時(shí)間間隔的變化，間隔不一定為100ms，如下圖所示
圖片.png
當(dāng) func(1)的執(zhí)行時(shí)間過(guò)長(zhǎng)，在200和300ms的時(shí)間節(jié)點(diǎn)，本該執(zhí)行的函數(shù) func(2)和 func(3)都不會(huì)執(zhí)行，而是進(jìn)入隊(duì)列中等待，知道 func(1)執(zhí)行結(jié)束后再依次執(zhí)行，但是如果此時(shí)如圖所示， func(2)的執(zhí)行時(shí)間過(guò)短，10ms就結(jié)束了，那么此時(shí)因?yàn)?func(3)也存在于隊(duì)列中，所以 func(3)會(huì)立即執(zhí)行，導(dǎo)致的結(jié)果就是，函數(shù)之間執(zhí)行的時(shí)間間隔并非100ms
而setTimeout是在第一次 func執(zhí)行完畢之后才再次調(diào)用 setTimtout(func, time)將其加入到事件隊(duì)列，這就保證第一個(gè)run執(zhí)行完畢 到 第二個(gè)run開(kāi)始執(zhí)行的時(shí)間間隔 > time
關(guān)于setTimeout的執(zhí)行時(shí)間
setTimeout實(shí)際上是存在最小執(zhí)行時(shí)間的，大概在4ms左右，下面這段代碼：
(function () {
setTimeout(function () {
alert(2);
}, 0);
alert(1);})()
它的輸出實(shí)際上是1，因?yàn)榧幢惆裺etTimeout的時(shí)間延遲設(shè)置成0，其依然是存在最小延遲的。
setTimeout在事件循環(huán)中的使用
setTimeout()函數(shù)接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為待加入隊(duì)列的消息，第二個(gè)參數(shù)為一個(gè)延遲（這個(gè)延遲是可選的，默認(rèn)為0，但如上述所說(shuō)，即便是為0，也存在一個(gè)最小延遲），這個(gè)延遲時(shí)間代表了消息實(shí)際被加入隊(duì)列的最小延遲時(shí)間，如果這段延遲時(shí)間過(guò)后，隊(duì)列中不存在其他消息，則這段消息會(huì)被馬上處理，但是，如果有其它消息， setTimeout 消息必須等待其它消息處理完。因此第二個(gè)參數(shù)僅僅表示最少延遲時(shí)間，而非確切的等待時(shí)間。
由于 setTimeout的上述特性，我們可以知道它的第二個(gè)參數(shù)所指定的延遲時(shí)間，實(shí)際上只是最小等待時(shí)間，具體的等待時(shí)長(zhǎng)取決于隊(duì)列中消息的數(shù)量及其執(zhí)行時(shí)間，只有當(dāng)前隊(duì)列中的消息都執(zhí)行完畢時(shí)，setTimeout中的消息才能被執(zhí)行。
