異步的概念

異步（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)于異步的概念的解釋?zhuā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)以至于被用戶(hù)察覺(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é)果是：

2
1

異步 AJAX

除了 setTimeout 函數(shù)以外，異步回調(diào)廣泛應(yīng)用于 AJAX 編程。有關(guān)于 AJAX 詳細(xì)請(qǐng)參見(jiàn)：http://www.dbjr.com.cn/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)注腳本之家其它相關(guān)文章！