Ajax順序執行

循環中的Ajax

在先後端分離的項目中，Ajax是鏈接先後端的樞紐。

需求：有一個須要循環發起n次的請求，可是n次循環傳參不一樣，我並不知道n是多少，而且要求可以保證返回順序。JSONP用同步鎖無效

示例一代碼：

for(var i = 0;i<5;i++){
    $.ajax({
        url : '',
        data : {},
        type:'GET',
        dataType : 'jsonp',
        success: function(res){
            console.log('ok');
        },
        error : function () {
            console.log(i);
        }
    });
}

這個時候因爲url爲空，走error方法，咱們想要輸出12345，但事實控制檯輸出了5次5。

由於ajax是異步請求，for循環會瞬間執行完，此時ajax尚未正確的返回數據。

實例二代碼：

for(var i = 0;i<5;i++){
    (function (i) {
        $.ajax({
            url : '',
            data : {},
            type:'GET',
            dataType : 'jsonp',
            success: function(res){
                console.log('ok');
            },
            error : function () {
                console.log(i);
            }
        })
    })(i)
}

想利用閉包的方式傳值，這時候輸出結果012345不定排序，並非按照我想要的順序返回，由於咱們不能肯定哪一個AJAX請求是先返回的。

示例三代碼：

var currentIndex = 0;
function a(){
 if(currentIndex >= 5){
     return;
 }
 $.ajax({
     url : '',
     data : {},
     type:'GET',
     dataType : 'jsonp',
     success: function(res){
         alert('ok');
     },
     error : function () {
         currentIndex++;
         console.log(currentIndex);
         a();
     }
 });
}
a();

因爲咱們並不知道會有多少請求發送，因此以遞歸的形式循環，既能循環n次ajax請求，又能保證數據返回的順序。