JavaScript的優勢之一是其如何處理非同步程式碼。非同步程式碼會被放入一個事件佇列，等到所有其他程式碼執行後才進行，而不會阻塞執行緒。然而，對於初學者來說，書寫非同步程式碼可能會比較困難。而在這篇文章裡，我將會消除你可能會有的任何困惑。
理解非同步程式碼

JavaScript最基礎的非同步函式是setTimeout和setInterval。setTimeout會在一定時間後執行給定的函式。它接受一個回撥函式作為第一引數和一個毫秒時間作為第二引數。以下是用法舉例：

console.log( "a" );
setTimeout(function() {
    console.log( "c" 
 
)
}, 500 );
setTimeout(function() {
    console.log( "d" )
}, 500 );
setTimeout(function() {
    console.log( "e" )
}, 500 );
console.log( "b" );

正如預期，控制檯先輸出“a”、“b”，大約500毫秒後，再看到“c”、“d”、“e”。我用“大約”是因為setTimeout事實上是不可預知的。實際上，甚至 HTML5規範都提到了這個問題：

“這個API不能保證計時會如期準確地執行。由於CPU負載、其他任務等所導致的延遲是可以預料到的。”

有趣的是，直到在同一程式段中所有其餘的程式碼執行結束後，超時才會發生。所以如果設定了超時，同時執行了需長時間執行的函式，那麼在該函式執行完成之前，超時甚至都不會啟動。實際上，非同步函式，如setTimeout和setInterval，被壓入了稱之為Event Loop的佇列。

Event Loop是一個回撥函式佇列。當非同步函式執行時，回撥函式會被壓入這個佇列。JavaScript引擎直到非同步函式執行完成後，才會開始處理事件迴圈。這意味著JavaScript程式碼不是多執行緒的，即使表現的行為相似。事件迴圈是一個先進先出（FIFO）佇列，這說明回撥是按照它們被加入佇列的順序執行的。JavaScript被 node選做為開發語言，就是因為寫這樣的程式碼多麼簡單啊。

Ajax

非同步Javascript與XML（AJAX）永久性的改變了Javascript語言的狀況。突然間，瀏覽器不再需要重新載入即可更新web頁面。 在不同的瀏覽器中實現Ajax的程式碼可能漫長並且乏味；但是，幸虧有jQuery（還有其他庫）的幫助，我們能夠以很容易並且優雅的方式實現客戶端-伺服器端通訊。

我們可以使用jQuery跨瀏覽器介面$.ajax很容易地檢索資料，然而卻不能呈現幕後發生了什麼。比如：

var data;
$.ajax({
    url: "some/url/1",
    success: function( data ) {
        // But, this will!
console.log( data );
    }
})
// Oops, this won't work...
console.log( data );

xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
    if ( xmlhttp.readyState === 4 ) {
        console.log( data );
    }
};
xmlhttp.send( null );

底層的XmlHttpRequest物件發起請求，設定回撥函式用來處理XHR的readystatechnage事件。然後執行XHR的send方法。在XHR執行中，當其屬性readyState改變時readystatechange事件就會被觸發，只有在XHR從遠端伺服器接收響應結束時回撥函式才會觸發執行。

處理非同步程式碼

非同步程式設計很容易陷入我們常說的“回撥地獄”。因為事實上幾乎JS中的所有非同步函式都用到了回撥，連續執行幾個非同步函式的結果就是層層巢狀的回撥函式以及隨之而來的複雜程式碼。

node.js中的許多函式也是非同步的。因此如下的程式碼基本上很常見：

var fs = require( "fs" );
fs.exists( "index.js", function() {
    fs.readFile( "index.js", "utf8", function( err, contents ) {
        contents = someFunction( contents ); // do something with contents
fs.writeFile( "index.js", "utf8", function() {
            console.log( "whew! Done finally..." );
        });
    });
});
console.log( "executing..." );

GMaps.geocode({
    address: fromAddress,
    callback: function( results, status ) {
        if ( status == "OK" ) {
            fromLatLng = results[0].geometry.location;
            GMaps.geocode({
                address: toAddress,
                callback: function( results, status ) {
                    if ( status == "OK" ) {
                        toLatLng = results[0].geometry.location;
                        map.getRoutes({
                            origin: [ fromLatLng.lat(), fromLatLng.lng() ],
                            destination: [ toLatLng.lat(), toLatLng.lng() ],
                            travelMode: "driving",
                            unitSystem: "imperial",
                            callback: function( e ){
                                console.log( "ANNNND FINALLY here's the directions..." );
                                // do something with e
}
                        });
                    }
                }
            });
        }
    }
});

Nested callbacks can get really nasty, but there are several solutions to this style of coding.

巢狀的回撥很容易帶來程式碼中的“壞味道”，不過你可以用以下的幾種風格來嘗試解決這個問題

•     The problem isn't with the language itself; it's with the way programmers use the language — Async Javascript.

    沒有糟糕的語言，只有糟糕的程式猿 ——非同步JavaSript

命名函式

清除巢狀回撥的一個便捷的解決方案是簡單的避免雙層以上的巢狀。傳遞一個命名函式給作為回撥引數，而不是傳遞匿名函式：

var fromLatLng, toLatLng;
var routeDone = function( e ){
    console.log( "ANNNND FINALLY here's the directions..." );
    // do something with e
};
var toAddressDone = function( results, status ) {
    if ( status == "OK" ) {
        toLatLng = results[0].geometry.location;
        map.getRoutes({
            origin: [ fromLatLng.lat(), fromLatLng.lng() ],
            destination: [ toLatLng.lat(), toLatLng.lng() ],
            travelMode: "driving",
            unitSystem: "imperial",
            callback: routeDone
});
    }
};
var fromAddressDone = function( results, status ) {
    if ( status == "OK" ) {
        fromLatLng = results[0].geometry.location;
        GMaps.geocode({
            address: toAddress,
            callback: toAddressDone
});
    }
};
GMaps.geocode({
    address: fromAddress,
    callback: fromAddressDone
});

async.parallel([
    function( done ) {
        GMaps.geocode({
            address: toAddress,
            callback: function( result ) {
                done( null, result );
            }
        });
    },
    function( done ) {
        GMaps.geocode({
            address: fromAddress,
            callback: function( result ) {
                done( null, result );
            }
        });
    }
], function( errors, results ) {
    getRoute( results[0], results[1] );
});

這段程式碼執行兩個非同步函式，每個函式都接收一個名為"done"的回撥函式並在函式結束的時候呼叫它。當兩個"done"回撥函式結束後，parallel函式的回撥函式被呼叫並執行或處理這兩個非同步函式產生的結果或錯誤。

Promises模型
引自 CommonJS/A：

promise表示一個操作獨立完成後返回的最終結果。

有很多庫都包含了promise模型，其中jQuery已經有了一個可使用且很出色的promise API。jQuery在1.5版本引入了Deferred物件，並可以在返回promise的函式中使用jQuery.Deferred的構造結果。而返回promise的函式則用於執行某種非同步操作並解決完成後的延遲。

var geocode = function( address ) {
    var dfd = new $.Deferred();
    GMaps.geocode({
        address: address,
        callback: function( response, status ) {
            return dfd.resolve( response );
        }
    });
    return dfd.promise();
};
var getRoute = function( fromLatLng, toLatLng ) {
    var dfd = new $.Deferred();
    map.getRoutes({
        origin: [ fromLatLng.lat(), fromLatLng.lng() ],
        destination: [ toLatLng.lat(), toLatLng.lng() ],
        travelMode: "driving",
        unitSystem: "imperial",
        callback: function( e ) {
            return dfd.resolve( e );
        }
    });
    return dfd.promise();
};
var doSomethingCoolWithDirections = function( route ) {
    // do something with route
};
$.when( geocode( fromAddress ), geocode( toAddress ) ).
then(function( fromLatLng, toLatLng ) {
    getRoute( fromLatLng, toLatLng ).then( doSomethingCoolWithDirections );
});

這允許你執行兩個非同步函式後，等待它們的結果，之後再用先前兩個呼叫的結果來執行另外一個函式。

•     promise表示一個操作獨立完成後返回的最終結果。

在這段程式碼裡，geocode方法執行了兩次並返回了一個promise。非同步函式之後執行，並在其回撥裡呼叫了resolve。然後，一旦兩次呼叫resolve完成，then將會執行，其接收了之前兩次呼叫geocode的返回結果。結果之後被傳入getRoute，此方法也返回一個promise。最終，當getRoute的promise解決後，doSomethingCoolWithDirections回撥就執行了。
 
事件
事件是另一種當非同步回撥完成處理後的通訊方式。一個物件可以成為發射器並派發事件，而另外的物件則監聽這些事件。這種型別的事件處理方式稱之為 觀察者模式 。 backbone.js 庫在withBackbone.Events中就建立了這樣的功能模組。

var SomeModel = Backbone.Model.extend({
    url: "/someurl"
});
var SomeView = Backbone.View.extend({
    initialize: function() {
        this.model.on( "reset", this.render, this );
        this.model.fetch();
    },
    render: function( data ) {
        // do something with data
}
});
var view = new SomeView({
    model: new SomeModel()
});

還有其他用於發射事件的混合例子和函式庫，例如 jQuery Event Emitter ， EventEmitter ， monologue.js ，以及node.js內建的 EventEmitter 模組。

事件迴圈是一個回撥函式的佇列。

一個類似的派發訊息的方式稱為 中介者模式 ， postal.js 庫中用的即是這種方式。在中介者模式，有一個用於所有物件監聽和派發事件的中間人。在這種模式下，一個物件不與另外的物件產生直接聯絡，從而使得物件間都互相分離。

絕不要返回promise到一個公用的API。這不僅關係到了API使用者對promises的使用，也使得重構更加困難。不過，內部用途的promises和外部介面的事件的結合，卻可以讓應用更低耦合且便於測試。

在先前的例子裡面，doSomethingCoolWithDirections回撥函式在兩個geocode函式完成後執行。然後，doSomethingCoolWithDirections才會獲得從getRoute接收到的響應，再將其作為訊息傳送出去。

var doSomethingCoolWithDirections = function( route ) {
    postal.channel( "ui" ).publish( "directions.done", {
        route: route
    });
};

var UI = function() {
    this.channel = postal.channel( "ui" );
    this.channel.subscribe( "directions.done", this.updateDirections ).withContext( this );
};
UI.prototype.updateDirections = function( data ) {
    // The route is available on data.route, now just update the UI
};
app.ui = new UI();

另外一些基於中介者模式傳送訊息的庫有 amplify, PubSubJS, and radio.js。

結論

JavaScript 使得編寫非同步程式碼很容易. 使用 promises, 事件, 或者命名函式來避免“callback hell”. 為獲取更多javascript非同步程式設計資訊,請點選Async JavaScript: Build More Responsive Apps with Less . 更多的例項託管在github上，地址NetTutsAsyncJS，趕快Clone吧 !