1. 程式人生 > >多個ajax順序執行問題及ajax請求為同步時loading效果無意義的問題

多個ajax順序執行問題及ajax請求為同步時loading效果無意義的問題

  ajax是一種常用的網頁區域性刷新技術,當請求資料時間較長或防止使用者多次點選等情況下,會在請求資料的過程中新增loading效果,提高使用者體驗。
  當需要執行多個ajax並需要考慮執行順序時,可以使用ajax巢狀、同步、回撥三個方法。
  1、ajax巢狀:
$.ajax({
url : "url",
data : data,
type : "POST",
dataType:"json",
success : function(result,status,xhr) {
    $.ajax({
    url : "url",
    data : data,
    type : "POST",
    dataType:"json",
    success : function(result,status,xhr) {

    },
    });
    },
});
  2、同步
  ajax請求設定為同步請求,這時執行ajax執行結束前不會執行之後的程式碼,保證ajax的執行順序,但同時ajax之前的呼叫showLoading在整個方法執行完以後才會生效,這就導致loading效果毫無意義。我們可以使用setTimeout來解決這個問題。
  如showLoadingTimeout方法把需要先生效之外的程式碼放入setTimeout方法內,延遲0秒後執行。以此來解決這個問題。
$.ajax({
  url : "url",
  data : data,
  type : "POST",
  dataType:"json",
  async:false,
  success : function(result,status,xhr) {

  },
});
function showLoadingTimeout(fun){
showLoading();//loading效果展示方法
if(typeof fun == "function"){
setTimeout(function(){
fun();
},0)
}
}
3.回撥
  巢狀升級版
function fun1(fun){
  $.ajax({
    url : "url",
    data : data,
    type : "POST",
    success : function(result,status,xhr) {
    if(typeof fun == "function"){
           fun();
         }
    },
    });
}
function fun2(fun){
  $.ajax({
    url : "url",
    data : data,
    type : "POST",
    success : function(result,status,xhr) {
    if(typeof fun == "function"){
           fun();
         }
    },
    });
}
function fun(){
  ....
  fun2(function(){
    fun1(function(){
      ......
    });
  });
  .....
}