摘要：環(huán)境中產(chǎn)生異步操作的函數(shù)分為兩大類計時函數(shù)和函數(shù)。如果要在應(yīng)用中定義復(fù)雜的異步操作，就要使用者兩類異步函數(shù)作為基本的構(gòu)造快。在本例子中同步事件循環(huán)不包含內(nèi)部的外部的異步事件循環(huán)內(nèi)部的。其弊端是操作強(qiáng)耦合維護(hù)代價高。

JavaScript環(huán)境中產(chǎn)生異步操作的函數(shù)分為兩大類：計時函數(shù)和I/O函數(shù)。如果要在應(yīng)用中定義復(fù)雜的異步操作，就要使用者兩類異步函數(shù)作為基本的構(gòu)造快。本文沒有對某個知識點(diǎn)細(xì)致展開，僅供思路參考。

先看一個經(jīng)典的例子：

for(var i = 0;i < 5; i++){
    setTimeout(function(){
        console.log(i);
    },5000);
}
console.log(i)；

結(jié)果輸出什么？立馬輸出一個5，5秒鐘過后連續(xù)輸出5個5（嗚嗚嗚嗚嗚~），搞懂為什么這樣輸出5，需要知道3件事：

這里只有一個i變量，作用域由var定義，不管i怎么變，都指向同一個內(nèi)存區(qū)域；

循環(huán)結(jié)束后 i=== 5；

JavaScript事件處理器在線程空閑之前不會執(zhí)行。

來，再來和我背一遍口訣：先同步后異步最后回調(diào)。在本例子中：

同步事件：for循環(huán)(不包含內(nèi)部的setTimeout)；外部的console.log(i);

異步事件：for循環(huán)內(nèi)部的setTimeout。

先執(zhí)行for循環(huán)，遇到setTimeout壓入延遲事件隊列，一邊循環(huán)一邊壓入隊列；for循環(huán)結(jié)束執(zhí)行外部的console.log(i)，此時i=5,故立即輸出5，此時同步事件執(zhí)行完畢，接下來開始執(zhí)行異步事件setTimeout，5個setTimeout事件等待5秒同時在等待，所以5秒結(jié)束連續(xù)輸出5個5。

再看一個例子：

var start = new Date;
setTimeout(function(){
    var end = new Date;
    console.log("time using:" + (end - start) + "ms");
},5000);
while(new Date - start < 1000){};

猜猜結(jié)果是什么？

調(diào)換一下時間：

var start = new Date;
setTimeout(function(){
    var end = new Date;
    console.log("time using:" + (end - start) + "ms");
},2000);
while(new Date - start < 5000){};

這里唯一想說的是：像setTimeout或是setInterval并非是精確計時的， setTimeout與setInterval在不同瀏覽器下的差異。

這里的I/O是一個廣義的概念，包括讀寫文件，GET或POST請求，異步讀取值值函數(shù)等等。一個常見的讀文件的操作：fs.js

var fs = require("fs");

fs.readFile("data.txt",function(err,data){
    if(err){
        return console.log(err);
    }
    console.log(data.toString())
});

data.txt的內(nèi)容：

hello
world
hello
async

node fs.js：

沒毛病！設(shè)想一個場景，在另外一個函數(shù)，假設(shè)名字叫panfen(),里面有一堆代碼，其中需要用到從data.txt文件讀取的數(shù)據(jù)，常見的做法是把fs.readFile操作寫在panfen()里面，處理data的操作都寫在fs.readFile的callback里面，如果callback里面還要寫數(shù)據(jù)呢？繼續(xù)執(zhí)行fs.writeFile在它的callback里面執(zhí)行其他操作...

var fs = require("fs");

fs.readFile("data.txt",function(err,data){
    if(err){
        return console.log("failed to read data!");
    }else{
        fs.writeFile("./data_copy.txt", data, function(){
            if(err){
                ...
            }else{
                ...
            }
        });
    }
});

這就是回調(diào)金字塔。其弊端是操作強(qiáng)耦合、維護(hù)代價高。如何做到理想的異步呢？

靈機(jī)一動這樣寫：

var fs = require("fs");

var data = fs.readFile("data.txt",function(err,data){
    return data ? data : err;
});
fs.writeFile("./data_copy.txt", data, function(){
    ...
});

然而，根據(jù)先同步后異步最后回調(diào)的法則，fs.writeFile里面使用到的data,肯定是undefined

var fs = require("fs")

function myReadFile(filepath) {
    return new Promise(function (resolve, reject) {
        fs.readFile(filepath, function (err, data) {
            data ? resolve(data) : reject(err);
        });
    });
}

function myWriteFile(filepath,data) {
    return new Promise(function (resolve, reject) {
        fs.writeFile(filepath,data,function (err) {
            err ? reject(err) : resolve();
        });
    });
}

function test() {
    myReadFile("data.txt").then(function(data){
        myWriteFile("./data1.txt",data)
    });
}
test();

Promise的特點(diǎn)在于可以用then方法向下傳遞值。

關(guān)于生成器函數(shù)，這里不作具體介紹，簡單看一例子：

function* GenFunc(){
    yield [1,2];
    yield* [3,4];
    yield "56";
    yield* "78"  
}
var gen = GenFunc();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

yield和yield*的區(qū)別：

yield只返回右值；

yield*將函數(shù)委托給另一個生成器，或可迭代的對象（字符串、數(shù)組、arguments、Map、Set）

注： yield關(guān)鍵字只能出現(xiàn)在生成器函數(shù)里面!!!否則會報錯：Unexpected strict mode reserved word

co是基于Generator的一個庫：

var fs = require("fs");
var co = require("co");

function myReadFile(filepath){
    return function(cb){
        fs.readFile(filepath,cb);
    };
}

function myWriteFile(filepath,data){
    return function(cb){
        fs.writeFile(filepath,data,cb);
    };
}

co(function* GenFunc(){
    var data = yield myReadFile("data.txt");
    yield myWriteFile("data1.txt",data);
}).catch(function(err){
    console.log(err);
});

看起來是不是神清氣爽？

Koa是基于Generator和co的web框架。

var koa = require("koa");
var app = koa();

app.use(function* (next){
    console.log(1);
    yield next;
    console.log(3);
});
app.use(function* (){
    console.log(2);
    this.body = "hello Koa!";
});
app.listen(8080);

啟動程序，流浪器輸入localhost:8080,看到頁面有hello Koa!，控制臺輸入1 2 3

隨著 Node 7 的發(fā)布，越來越多的人開始研究async/await，據(jù)說這是異步編程終級解決方案的 。個人覺得沒有最好，只有更好。用這種方式改寫：

"use strict"
var fs = require("fs")

function myReadFile(filepath) {
    return new Promise(function (resolve, reject) {
        fs.readFile(filepath, function (err, data) {
            data ? resolve(data) : reject(err);
        });
    });
}

function myWriteFile(filepath,data) {
    return new Promise(function (resolve, reject) {
        fs.writeFile(filepath,data,function (err) {
            err ? reject(err) : resolve();
        });
    });
}

async function test() {
    const data = await myReadFile("data.txt");
    await myWriteFile("./data1.txt",data);
}
test();

當(dāng)然，這個例子還不足以體現(xiàn)async/awit的優(yōu)勢。

JavaScript的異步操作可能是區(qū)別其他語言比較大的一點(diǎn)，也是一個難點(diǎn)，不過也是很有趣的。