異步的概念

異步（Asynchronous, async）是與同步（Synchronous, sync）相對(duì)的概念。

在我們學(xué)習(xí)的傳統(tǒng)單線程編程中，程序的運(yùn)行是同步的（同步不意味著所有步驟同時(shí)運(yùn)行，而是指步驟在一個(gè)控制流序列中按順序執(zhí)行）。而異步的概念則是不保證同步的概念，也就是說(shuō)，一個(gè)異步過(guò)程的執(zhí)行將不再與原有的序列有順序關(guān)系。

簡(jiǎn)單來(lái)理解就是：同步按你的代碼順序執(zhí)行，異步不按照代碼順序執(zhí)行，異步的執(zhí)行效果更高：

以上是關(guān)于異步的概念的解釋，接下來(lái)我們通俗地解釋一下異步：異步就是從主線程發(fā)射一個(gè)子線程來(lái)完成任務(wù)。

什么時(shí)候用異步編程

在前端編程中（甚至后端有時(shí)也是這樣），我們?cè)谔幚硪恍┖?jiǎn)短、快速的操作時(shí)，例如計(jì)算 1 + 1 的結(jié)果，往往在主線程中就可以完成。主線程作為一個(gè)線程，不能夠同時(shí)接受多方面的請(qǐng)求。所以，當(dāng)一個(gè)事件沒(méi)有結(jié)束時(shí)，界面將無(wú)法處理其他請(qǐng)求。

現(xiàn)在有一個(gè)按鈕，如果我們?cè)O(shè)置它的 onclick 事件為一個(gè)死循環(huán)，那么當(dāng)這個(gè)按鈕按下，整個(gè)網(wǎng)頁(yè)將失去響應(yīng)。

為了避免這種情況的發(fā)生，我們常常用子線程來(lái)完成一些可能消耗時(shí)間足夠長(zhǎng)以至于被用戶察覺(jué)的事情，比如讀取一個(gè)大文件或者發(fā)出一個(gè)網(wǎng)絡(luò)請(qǐng)求。因?yàn)樽泳€程獨(dú)立于主線程，所以即使出現(xiàn)阻塞也不會(huì)影響主線程的運(yùn)行。但是子線程有一個(gè)局限：一旦發(fā)射了以后就會(huì)與主線程失去同步，我們無(wú)法確定它的結(jié)束，如果結(jié)束之后需要處理一些事情，比如處理來(lái)自服務(wù)器的信息，我們是無(wú)法將它合并到主線程中去的。

為了解決這個(gè)問(wèn)題，JavaScript 中的異步操作函數(shù)往往通過(guò)回調(diào)函數(shù)來(lái)實(shí)現(xiàn)異步任務(wù)的結(jié)果處理。

回調(diào)函數(shù)

回調(diào)函數(shù)就是一個(gè)函數(shù)，它是在我們啟動(dòng)一個(gè)異步任務(wù)的時(shí)候就告訴它：等你完成了這個(gè)任務(wù)之后要干什么。這樣一來(lái)主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了，他自己會(huì)善始善終。

實(shí)例

function print() { document.getElementById('demo').innerHTML='JB51!';}setTimeout(print, 3000);

效果圖

這段程序中的 setTimeout 就是一個(gè)消耗時(shí)間較長(zhǎng)（3 秒）的過(guò)程，它的第一個(gè)參數(shù)是個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是毫秒數(shù)，這個(gè)函數(shù)執(zhí)行之后會(huì)產(chǎn)生一個(gè)子線程，子線程會(huì)等待 3 秒，然后執(zhí)行回調(diào)函數(shù) 'print'，在命令行輸出 'Time out'。

當(dāng)然，JavaScript 語(yǔ)法十分友好，我們不必單獨(dú)定義一個(gè)函數(shù) print ，我們常常將上面的程序?qū)懗桑?/p>

setTimeout(function () { document.getElementById('demo').innerHTML='JB51!';}, 3000);

注意：既然 setTimeout 會(huì)在子線程中等待 3 秒，在 setTimeout 函數(shù)執(zhí)行之后主線程并沒(méi)有停止，所以：

setTimeout(function () { console.log('1');}, 1000);console.log('2');

這段程序的執(zhí)行結(jié)果是：

21

異步 AJAX

除了 setTimeout 函數(shù)以外，異步回調(diào)廣泛應(yīng)用于 AJAX 編程。有關(guān)于 AJAX 詳細(xì)請(qǐng)參見：https://www.jb51.net/article/80686.htm

XMLHttpRequest 常常用于請(qǐng)求來(lái)自遠(yuǎn)程服務(wù)器上的 XML 或 JSON 數(shù)據(jù)。一個(gè)標(biāo)準(zhǔn)的 XMLHttpRequest 對(duì)象往往包含多個(gè)回調(diào)：

var xhr = new XMLHttpRequest(); xhr.onload = function () { // 輸出接收到的文字?jǐn)?shù)據(jù) document.getElementById('demo').innerHTML=xhr.responseText;} xhr.onerror = function () { document.getElementById('demo').innerHTML='請(qǐng)求出錯(cuò)';} // 發(fā)送異步 GET 請(qǐng)求xhr.open('GET', 'https://www.runoob.com/try/ajax/ajax_info.txt', true);xhr.send();

XMLHttpRequest 的 onload 和 onerror 屬性都是函數(shù)，分別在它請(qǐng)求成功和請(qǐng)求失敗時(shí)被調(diào)用。如果你使用完整的 jQuery 庫(kù)，也可以更加優(yōu)雅的使用異步 AJAX：

$.get('https://www.runoob.com/try/ajax/demo_test.php',function(data,status){ alert('數(shù)據(jù): ' + data + 'n狀態(tài): ' + status);});

以上就是詳解JavaScript 異步編程的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 異步編程的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！