異步的概念

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

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

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

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

什么時候用異步編程

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

現在有一個按鈕，如果我們設置它的 onclick 事件為一個死循環，那么當這個按鈕按下，整個網頁將失去響應。

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

為了解決這個問題，JavaScript 中的異步操作函數往往通過回調函數來實現異步任務的結果處理。

回調函數

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

實例

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

效果圖

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

當然，JavaScript 語法十分友好，我們不必單獨定義一個函數 print ，我們常常將上面的程序寫成：

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

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

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

這段程序的執行結果是：

21

異步 AJAX

除了 setTimeout 函數以外，異步回調廣泛應用于 AJAX 編程。有關于 AJAX 詳細請參見：https://www.jb51.net/article/80686.htm

XMLHttpRequest 常常用于請求來自遠程服務器上的 XML 或 JSON 數據。一個標準的 XMLHttpRequest 對象往往包含多個回調：

var xhr = new XMLHttpRequest(); xhr.onload = function () { // 輸出接收到的文字數據 document.getElementById('demo').innerHTML=xhr.responseText;} xhr.onerror = function () { document.getElementById('demo').innerHTML='請求出錯';} // 發送異步 GET 請求xhr.open('GET', 'https://www.runoob.com/try/ajax/ajax_info.txt', true);xhr.send();

XMLHttpRequest 的 onload 和 onerror 屬性都是函數，分別在它請求成功和請求失敗時被調用。如果你使用完整的 jQuery 庫，也可以更加優雅的使用異步 AJAX：

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

以上就是詳解JavaScript 異步編程的詳細內容，更多關于JavaScript 異步編程的資料請關注好吧啦網其它相關文章！