異步的概念

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

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

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

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

什么時候用異步編程

在前端編程中（甚至后端有時也是這樣），我們在處理一些簡短、快速的操作時，例如計算 1 + 1 的結(jié)果，往往在主線程中就可以完成。主線程作為一個線程，不能夠同時接受多方面的請求。所以，當(dāng)一個事件沒有結(jié)束時，界面將無法處理其他請求。

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

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

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

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

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

實例

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

效果圖

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

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

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

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

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

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

21

異步 AJAX

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

XMLHttpRequest 常常用于請求來自遠(yuǎn)程服務(wù)器上的 XML 或 JSON 數(shù)據(jù)。一個標(biāo)準(zhǔn)的 XMLHttpRequest 對象往往包含多個回調(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='請求出錯';} // 發(fā)送異步 GET 請求xhr.open('GET', 'https://www.runoob.com/try/ajax/ajax_info.txt', true);xhr.send();

XMLHttpRequest 的 onload 和 onerror 屬性都是函數(shù)，分別在它請求成功和請求失敗時被調(diào)用。如果你使用完整的 jQuery 庫，也可以更加優(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 異步編程的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！