關於for循環里面異步操作的問題

一、使用自執行函數

　　1、當自執行函數在循環當中使用時，自執行函數會在循環結束之后才會運行。比如你在自執行函數外面定義一個數組，在自執行函數當中給這個數組追加內容，你在自執行函數之外輸出時，會發現這個數組當中仕么都沒有，這就是因為自執行函數會在循環運行完后才會執行。

　　2、當自執行函數在循環當中使用時，要是自執行函數當中嵌套ajax，那么循環當中的下標i就不會傳進ajax當中，需要在ajax外面把下標i賦值給一個變量，在ajax中直接調用這個變量就可以了。

　　例子：

$.ajax({
    type: "GET",
    dataType: "json",
    url: "***",
    success: function(data) {
        //console.log(data);               
        for (var i = 0; i < data.length; i++) {
            (function(i, abbreviation) {
                $.ajax({
                    type: "GET",
                    url: "/api/faults?abbreviation=" + encodeURI(abbreviation),
                    dataType: "json",
                    success: function(result) {
                        //獲取數據后做的事情
                    }
                })
            })(i, data[i].abbreviation);
        }
    }
});

二、使用遞歸函數

所謂的遞歸函數就是在函數體內調用本函數。使用遞歸函數一定要注意，處理不當就會進入死循環。

const asyncDeal = (i) = > {
    if (i < 3) {
        $.get('/api/changeParts/change_part_standard?part=' + data[i].change_part_name, function(res) {
            //獲取數據后做的事情
            i++;
            asyncDeal(i);
        })
    } else {
        //異步完成后做的事情
    }
};
asyncDeal(0);

三、使用async/await

async/await特點

1. async/await更加語義化，async 是“異步”的簡寫，async function 用於申明一個 function 是異步的； await，可以認為是async wait的簡寫， 用於等待一個異步方法執行完成；

2. async/await是一個用同步思維解決異步問題的方案（等結果出來之后，代碼才會繼續往下執行）

3. 可以通過多層 async function 的同步寫法代替傳統的callback嵌套

async function語法

• 自動將常規函數轉換成Promise，返回值也是一個Promise對象

• 只有async函數內部的異步操作執行完，才會執行then方法指定的回調函數

• 異步函數內部可以使用await

await語法

• await 放置在Promise調用之前，await 強制后面點代碼等待，直到Promise對象resolve，得到resolve的值作為await表達式的運算結果

• await只能在async函數內部使用,用在普通函數里就會報錯

const asyncFunc = function(i) {
    return new Promise(function(resolve) {
        $.get(url, function(res) {
            resolve(res);
        })
    });
}
const asyncDeal = async function() {
    for (let i = 0; i < data.length; i++) {
        let res = await asyncFunc(i);
        //獲取數據后做的事情
    }
}
asyncDeal();