在jQuery中依賴ajax調用的最佳方法

Question

我有一種情況需要做5個Ajax調用。第二次ajax呼叫將在第一次呼叫返回響應後進行，第三次呼叫在第二次呼叫完成時進行，同樣也是第四次和第五次呼叫。

有兩種方法可以解決這個問題，我知道，我可以在先前的調用成功之前嵌套ajax調用，或者在第一次調用之前使異步成爲false，並在上次調用後使其成爲true。任何人都可以建議是哪一個，爲什麼這是更好的方式來完成我的任務，或者有更好的方法來做到這一點。

//First Way 
$.ajax({ 
... 
success:function(){ 
    $.ajax({ 
    ... 
     success:function(){ 
      $.ajax({ 
      ... 
       success:function(){ 
        $.ajax({ 
        ... 
         success:function(){ 
           do something  
         } 
        }); 
       } 
      }); 
     } 
    }); 
} 
}); 

//second way 
$.ajaxSetup({ 
    async: false 
}); 
$.ajax({ 
}); 
$.ajax({ 
}); 
$.ajax({ 
}); 
$.ajax({ 
}); 
$.ajax({ 
}); 
$.ajaxSetup({ 
    async: true 
}); 

Answer 1

可以在任何一個建議是，爲什麼它是更好的方式來完成我的任務......

使用async: false將使呼叫同步，它鎖定了UI呼叫正在運行時的瀏覽器。在通話過程中讓用戶界面響應更好。

所以留下異步呼叫是最好的;有幾個方法可以做到這一點：

使用success處理程序，爲你展示有：

$.ajax({ 
    /*...*/, 
    success: function() { 
     $.ajax({ 
      /*...*/, 
      success: function() { 
       $.ajax({ 
        /*...*/, 
        success: function() { 
         $.ajax({ 
          /*...*/, 
          success: function() { 
           $.ajax({ 
            /*...*/ 
           }); 
          } 
         }); 
        } 
       }); 
      } 
     }); 
    } 
}); 

（我假設你已經是註冊一個全球性的Ajax錯誤處理程序，或者你有一個在上面/*...*/）

有使用一個承諾，而不是鏈條，這是相當類似：

$.ajax({/*...*/}) 
    .done(function() { 
     $.ajax({/*...*/}) 
      .done(function() { 
       $.ajax({/*...*/}) 
        .done(function() { 
         $.ajax({/*...*/}) 
          .done(function() { 
           $.ajax({/*...*/}); 
          }); 
        }); 
      }); 
    }); 

或者你也可以使用函數廁所p，如下所示：

(function() { 
    var calls = [ 
     function() { $.ajax({/*...*/, success: next)}, 
     function() { $.ajax({/*...*/, success: next)}, 
     function() { $.ajax({/*...*/, success: next)}, 
     function() { $.ajax({/*...*/, success: next)}, 
     function() { $.ajax({/*...*/, success: next)} 
    ]; 
    var index = 0; 
    next(); 

    function next() { 
     if (index < calls.length) { 
      // Do the next, increment the call index 
      calls[index++](); 
     } 
    } 
})();