這篇文章主要介紹JavaScript中從setTimeout與setInterval到AJAX異步的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)紹興,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

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í)行，所以可以稱之為偽異步。

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

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

AJAX 異步的原理

發(fā)送一個(gè)AJAX請(qǐng)求的時(shí)候，瀏覽器會(huì)有一個(gè)專門(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)部代碼。

以上是“JavaScript中從setTimeout與setInterval到AJAX異步的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：JavaScript中從setTimeout與setInterval到AJAX異步的示例分析
網(wǎng)頁(yè)地址：http://chinadenli.net/article40/giieho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站制作、、網(wǎng)站建設(shè)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)