setTimeout與setInterval執(zhí)行

　　首先我們看一下以下代碼打印結(jié)果

console.log(1);
setTimeout(function() { console.log(2); },100)
setTimeout(function() { console.log(3); },50)
console.log(4);

　　打印結(jié)果是 1、4、3、2，你可能覺(jué)得理所應(yīng)當(dāng)，那我們?cè)倏聪孪旅孢@個(gè)例子

console.log(1);
setTimeout(function() { console.log(2); },0)
console.log(3);

　　這次的結(jié)果又會(huì)是什么呢？

　　1、3、2，不是1、2、3。到這里你可能會(huì)有疑惑了，明明定時(shí)器設(shè)置的時(shí)間為0，而且瀏覽器解析js是按照從上到下執(zhí)行的，應(yīng)該是1、2、3才對(duì)??？

　　到這里我們要提一下瀏覽器的線程問(wèn)題。

　　與js相關(guān)的瀏覽器線程有三個(gè)（注意：js解析是單線程） - js代碼執(zhí)行線程( 主線程 ) - UI渲染線程 - 事件循環(huán)線程

　　其中js代碼執(zhí)行線程與UI渲染線程兩者是互斥的，也就是說(shuō)js代碼執(zhí)行線程運(yùn)行的時(shí)候，UI渲染線程會(huì)停止工作，這樣做也是為了防止js中的DOM操作會(huì)導(dǎo)致兩線程沖突；而事件循環(huán)線程比較特殊，接下來(lái)會(huì)根據(jù)setTimerout的執(zhí)行過(guò)程進(jìn)行講解其作用。

　　回到上面的第一道題目

console.log(1);
 setTimeout(function() { console.log(2); },100)
 setTimeout(function() { console.log(3); },50)
 console.log(4);

　　　執(zhí)行過(guò)程：

js主線程運(yùn)行，遇到console.log(1)，直接運(yùn)行，在控制臺(tái)輸出結(jié)果；

主線程繼續(xù)運(yùn)行，然后遇到第一個(gè)setTimeout，接著setTimeout中的回調(diào)函數(shù)會(huì)被放入到一個(gè)事件隊(duì)列中（這里的事件隊(duì)里可以想象成一個(gè)備忘錄，里面記錄的全是一些需要做而未做的事）；

遇到第二個(gè)setTimeout，其中的回調(diào)函數(shù)依然被加入到事件隊(duì)列中；

執(zhí)行console.log(4)，到這里主線程的任務(wù)全部執(zhí)行完畢，除了setTimeout里面的回調(diào)函數(shù)；

這個(gè)時(shí)候，我們還未說(shuō)明的事件循環(huán)線程開(kāi)始工作，它會(huì)去循環(huán)遍歷事件隊(duì)列（也就是我們的備忘錄），如果事件隊(duì)列中有回調(diào)函數(shù)，它就會(huì)將事件隊(duì)列中的回調(diào)函數(shù)重新交給主線程；

主線程收到回調(diào)函數(shù)，然后開(kāi)始執(zhí)行函數(shù)體。（這里要注意，因?yàn)閮蓚€(gè)setTimeout本身有執(zhí)行時(shí)間，所以在這里的時(shí)候就會(huì)根據(jù)時(shí)間的長(zhǎng)短按順序執(zhí)行啦。）

　　setInterval原理與之相同，不作另說(shuō)。

　　總的來(lái)說(shuō)，setTimeout與setInterval的執(zhí)行會(huì)等到主線程的所有任務(wù)全部執(zhí)行后，才會(huì)再執(zhí)行其中的回調(diào)函數(shù)，所以在使用它們的時(shí)候也要注意，特別是在主線程中有特別耗時(shí)的任務(wù)的時(shí)候，兩種定時(shí)器會(huì)被不可預(yù)測(cè)的延后。

　　講到這里，大家有沒(méi)有想到什么呢？

　　恩，就是異步，setTimeout的執(zhí)行有沒(méi)有一點(diǎn)異步的感覺(jué)呢？但又因?yàn)樗仨毷堑鹊街骶€程全部執(zhí)行完才會(huì)執(zhí)行，所以可以稱(chēng)之為偽異步。

　　說(shuō)到異步，我們還會(huì)想到AJAX，都說(shuō)AJAX是異步，但是它異步的原理想必還不清楚的你應(yīng)該有點(diǎn)興趣了解的。

　　異步：簡(jiǎn)單說(shuō)就是在處理某一件事的時(shí)候還可以去做別的事，比如：你在銀行取號(hào)后等待取錢(qián)，在等待的過(guò)程中你還可以玩手機(jī)，和別人聊天等等，這個(gè)過(guò)程就是異步的。

AJAX 異步的原理

發(fā)送一個(gè)AJAX請(qǐng)求的時(shí)候，瀏覽器會(huì)有一個(gè)專(zhuān)門(mén)的線程來(lái)進(jìn)行該任務(wù)；

而在AJAX中也是有回調(diào)函數(shù)的，比如請(qǐng)求成功后的回調(diào)，失敗后的回調(diào)，這些回調(diào)函數(shù)與setTimeout中的回調(diào)一樣會(huì)被推入到事件隊(duì)列中；

瀏覽器接會(huì)再次提供一個(gè)縣城接收AJAX請(qǐng)求返回的數(shù)據(jù)；

事件循環(huán)線程這時(shí)候知道事件隊(duì)列中AJAX的回調(diào)函數(shù)能夠被執(zhí)行了，遍歷事件隊(duì)列，將其中的回調(diào)函數(shù)交回給js主線程；

主線程執(zhí)行AJAX回調(diào)函數(shù)內(nèi)部代碼。

　　總的說(shuō)來(lái)，AJAX的請(qǐng)求不會(huì)干擾到主線程任務(wù)的執(zhí)行，它有自己專(zhuān)供的線程來(lái)處理其任務(wù)，就像是瀏覽器的親兒子~~~

以上所述是小編給大家介紹的JavaScript中從setTimeout與setInterval到AJAX異步，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論