JavaScript中從setTimeout與setInterval到AJAX異步的示例分析

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

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，你可能覺得理所應(yīng)當(dāng)，那我們再看下下面這個例子

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

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

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

　　到這里我們要提一下瀏覽器的線程問題。

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

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

　　回到上面的第一道題目

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

　　　執(zhí)行過程：

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

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

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

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

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

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

　　setInterval原理與之相同，不作另說。

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

　　講到這里，大家有沒有想到什么呢？

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

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

　　異步：簡單說就是在處理某一件事的時候還可以去做別的事，比如：你在銀行取號后等待取錢，在等待的過程中你還可以玩手機(jī)，和別人聊天等等，這個過程就是異步的。

AJAX 異步的原理

發(fā)送一個AJAX請求的時候，瀏覽器會有一個專門的線程來進(jìn)行該任務(wù)；

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

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

事件循環(huán)線程這時候知道事件隊(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)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！