摘要：異步與同步技術(shù)研究概念介紹異步簡寫同步簡寫用比方來比喻異步就是個人同時起跑起點和出發(fā)時間相同在起跑時不去關(guān)心其他人會啥時候跑完尼瑪這不廢話嗎大家都才起跑怎么知道別人多就跑完同步就是個人接力跑起點和出發(fā)時間不同且后一個人會等待前一個人跑完才能

異步: asynchronous 簡寫async
同步: synchronous 簡寫sync

用比方來比喻
異步就是: N個人同時起跑, 起點和出發(fā)時間相同, 在起跑時不去關(guān)心其他人會啥時候跑完～尼瑪這不廢話嗎？大家都才起跑怎么知道別人多就跑完.
同步就是: N個人接力跑, 起點和出發(fā)時間不同, 且后一個人會等待前一個人跑完才能繼續(xù)跑, 也就是要關(guān)心前一個人的結(jié)果（上一行代碼的返回值）.

JS運行場景多數(shù)是在用戶瀏覽器上, 程序效率優(yōu)劣會直接影響用戶的體驗交互. 比如一個網(wǎng)站, 在用戶注冊時, 會ajax校驗輸入再發(fā)提交表單, 如果用同步就可能會一直卡著等待ajax響應(yīng), 好幾秒結(jié)束后再跳到注冊結(jié)果頁, 這個體驗將是非常糟糕的.

說到JS的異步, 不得不提及一個非常有代表意義函數(shù)了.

JavaScriptvar url = "/action/";
var data = "i=1";
xmlHTTP = new XMLHttpRequest();
xmlHTTP.nonce = nonce;
xmlHTTP.open("POST", url);
xmlHTTP.onreadystatechange = function(a) {
    if(a.target.readyState!=4)return false;
    try{
        console.log(a.target.responseText)
    }catch(e){
        return false;
    }
};
xmlHTTP.send(data);

JavaScript$.ajax({
    url: "/action/",
    type: "POST",
    data: "i=1",
    success: function(responseText){
        console.log(responseText);
    }
})

 1) 請求發(fā)出
 2) 服務(wù)器開始響應(yīng)數(shù)據(jù)
 3) 響應(yīng)結(jié)束執(zhí)行回調(diào)方法

JavaScript$.ajax({"url":"a.html", type:"GET", async:true})
> Object {readyState: 1}

JavaScript$.ajax({"url":"robots.txt", type:"GET", false})
> Object {readyState: 4, responseText: "

我們可以直接看到, async:true異步模式下, jquery/javascript未將結(jié)果返回... 而async:false就將結(jié)果返回了.

然后問題就來了, 為什么async:true未返回結(jié)果呢?

答案很簡單:

因為在返回的時候, 程序不可能知道結(jié)果. 異步就是指不用等此操作執(zhí)行出結(jié)果再往下執(zhí)行, 也就是返回的值中未包含結(jié)果.

留下一個問題, 我們是不是為了程序流程的簡單化而使用同步呢?


(3). 異步的困惑

先帖一段代碼:

a.php

php

page.js

JavaScriptfor( i = 1; i <= 4; i++ ){
    $.ajax({
        url: "a.php",
        type: "POST",
        dataType: "json",
        data: {data: i},
        async: true,         // 默認(rèn)即為異步
        success: function(json) {
            console.log(i + ": " + json); // 打印
        }
    });
}


你們猜猜打印的那行會最終打印出什么內(nèi)容?

是

1: {}
2: {}
3: {}
4: {}


嗎？

錯！

輸出的將是:

4: {}
4: {}
4: {}
4: {}


你TM在逗我？

沒有, 這并不是JS的BUG, 也不是jQuery的BUG.

這是因為, PHP休息了一秒, 而js異步地循環(huán)從1到4, 遠遠用不到1秒.

然后在1秒鐘后, 才開始返回數(shù)據(jù), 觸發(fā)success, 此時此刻i已經(jīng)自增成了4.

自然而然地, 第一次console.log(i...)就是4, 第二次也是, 第三次也是, 第四次也是.

那么如果我們希望程序輸出也1,2,3,4這樣輸出怎么辦呢?

兩種方案:

1) 讓后端輸出i

a.php

php

page.js

JavaScriptfor( i = 1; i <= 4; i++ ){
    $.ajax({
        url: "a.php",
        type: "POST",
        dataType: "json",
        data: {data: i},
        async: true,
        success: function(json) {
            console.log(json.i + ": " + json); // 這一行改了
        }
    });
}


2) 給回調(diào)的事件對象賦屬性

a.php

php保持原代碼不變


page.js

JavaScriptfor( i = 1; i <= 4; i++ ){
    ajaxObj = $.ajax({          // 將ajax賦給ajaxObj
        url: "a.php",
        type: "POST",
        dataType: "json",
        data: {data: i},
        async: true,
        success: function(json, status, obj) {    // 增加回調(diào)參數(shù), jQuery文檔有說第三個參數(shù)就是ajax方法產(chǎn)生的對象.
                console.log(obj.i + ": " + json); // 從jQuery.ajax返回的對象中取i
        }
    });
    ajaxObj.i = i;            // 給ajaxObj賦屬性i 值為循環(huán)的i 
}


有可能你會感到困惑, 為何可以給ajaxObj設(shè)置一個i屬性然后在回調(diào)時用第三個回調(diào)參數(shù)的i屬性呢?


jQuery.ajax文檔中寫到:

jQuery.ajax( [settings ] )
settings
...
success: Function( Anything data, String textStatus, jqXHR jqXHR )
第1個參數(shù)就是響應(yīng)的文本/HTML/XML/數(shù)據(jù)/json之類的, 跟你的dataType設(shè)置有關(guān)
第2個參數(shù)就是status狀態(tài), 如success
第3個參數(shù)就是jqXHR, 也就是jQuery的XMLHttpRequest對象, 當(dāng)然, 在這里就是$.ajax()生成的對象, 也就是事件的觸發(fā)者本身, 
給本身設(shè)置一個屬性(ajaxObj.i = i), 然后再調(diào)用本身的回調(diào)時, 使用本身的那個屬性(obj.i), 當(dāng)然會保持一致了.


然后

1)輸出的結(jié)果將是

1: {i:1}
2: {i:2}
3: {i:3}
4: {i:4}


2)輸出的結(jié)果將是

1: {}
2: {}
3: {}
4: {}


雖然略有區(qū)別, 但兩者均可達到要求. 若要論代碼的逼格, 相信你一定會被第二個方案給震驚的.

憑什么你給ajaxObj賦個屬性就可以在success中用了呢?

請看(4). 異步的回調(diào)機制


(4). 異步的回調(diào)機制 ------ 事件

一個有經(jīng)驗的JavaScript程序員一定會將js回調(diào)用得得心應(yīng)手.

因為JavaScript天生異步, 異步的好處是顧及了用戶的體驗, 但壞處就是導(dǎo)致流程化循環(huán)或者遞歸的邏輯明明在別的語言中無任何問題, 卻在js中無法取得期待的值...

而JavaScript異步在設(shè)計之初就將這一點考慮到了. 任何流行起來的JS插件方法, 如jQuery的插件, 一定考慮到了這一點了的.

舉個例子.

ajaxfileupload插件, 實現(xiàn)原理是將選擇的文件$.clone到一個form中, form的target設(shè)置成了一個頁面中的iframe, 然后定時取iframe的contents().body, 即可獲得響應(yīng)的值.
如果要支持multiple文件上傳(一些現(xiàn)代化的瀏覽器支持), 還是得要用`XMLHttpRequest`


如下面代碼:

$("input#file").on("change", function(e){
    for(i = 0; i < e.target.files.length; i++ ){
        var data = new FormData();
        data.append("file", e.target.files[i]);
        xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open("POST", s.url);
        xmlHTTP.onreadystatechange = function(a) { // a 為 事件event對象
            if(a.target.readyState!=4)return false; // a.target為觸發(fā)這個事件的對象 即xmlHTTP (XMLHttpRequest) 對象
            try{
                console.log(a.target.responseText);
            }catch(e){
                return false;
            }
        };
        xmlHTTP.send(data);
    }
})


你可以很明顯地知道, 在onreadystatechange調(diào)用且走到console.log(a.target.responseText)時, 如果服務(wù)器不返回文件名, 我們根本并不知道返回的是哪個文件的URL. 如果根據(jù)i去取的話, 那么很容易地, 我們只會取到始終1個或幾個, 并不能保證準(zhǔn)確.

那么我們應(yīng)該怎么去保證在console.log(a.target.responseText)時能知道我信上傳的文件的基本信息呢?

$("input#file").on("change", function(e){
    for(i = 0; i < e.target.files.length; i++ ){
        var data = new FormData();
        data.append("file", e.target.files[i]);
        xmlHTTP = new XMLHttpRequest();
        xmlHTTP.file = e.target.files[i];
        xmlHTTP.open("POST", s.url);
        xmlHTTP.onreadystatechange = function(a) {
            if(a.target.readyState!=4)return false;
            try{
                console.log(a.target.file);         //這兒是上面`xmlHTTP.file = e.target.files[i]` 賦進去的
                console.log(a.target.responseText);
            }catch(e){
                return false;
            }
        };
        xmlHTTP.send(data);
    }
})


是不是很簡單?


2. 展望

(1). Google對同步JavaScript的態(tài)度

在你嘗試在chrome打開的頁面中執(zhí)行async: false的代碼時, chrome將會警告你:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user"s experience. For more help, check http://xhr.spec.whatwg.org/.




(2). 職場展望

異步和事件將是JavaScript工程師必備技能

[完]

Reference:

1.《Javascript異步編程的4種方法》     http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
2.《什么是 Event Loop？》            http://www.ruanyifeng.com/blog/2013/10/event_loop.html
3.《JavaScript 運行機制詳解：再談Event Loop》 http://www.ruanyifeng.com/blog/2014/10/event-loop.html



補充:

異步的數(shù)據(jù)一致性問題也可以用v1兄提供的方法來解決:

for(i=1; i < 4; i++){
    (function(i){
        $.ajax({
            url: "URL",
            type: "get",
            dataType: "text",
            success: function(response){
                console.log(response, i);
            }
        });
    })(i);
}