多個加載指標的多個AJAX調用

我在ASP.net MVC中有一個頁面，我使用ajax調用來爲每個div加載數據，其中有6個。我寫了兩種方法來顯示/隱藏像這樣的div的加載指示器。多個加載指標的多個AJAX調用

$("#divId").loading(); 
$("#divId").stopLoading();

這裏是我的ajax調用的一個（所有相同）

$.getJSON("RequestPerameters", function (result, textStatus, jqHXR) 
    { 
     $("#today-apt").stopLoading(); 

     //Populate Today-apt div 
    });

Definations加載和stopLoading mehtods

(function ($) 
    { 
     $.fn.Loading = function() 
     { 
      $(this).children().hide(); 
      $(this).append("<img src='/Images/loading.gif' class='center-block' />"); 
      return this; 
     }; 

     $.fn.stopLoading = function() 
     { 
      $(this).children(":visible").remove(); 
      $(this).children().show(); 
      return this; 
     }; 
    })(jQuery);

下面是從Ajax調用其中的準備方法被製造。

$(function() 
{ 


    $("#up-appointments").Loading(); 
    $("#mySales").Loading(); 
    $("#todays-appointments").Loading(); 
    $("#today-performance").Loading(); 
    $("#c-feed").Loading(); 

    loadPerformanceModal(); 
    loadAppointments(); 
    loadPTOs();// should be right after laodAppointments 
    loadMySales(); 
    loadUpCommingAppointments(); 
    loadUpCommingPTOs(); // should be right after loadUpCommingAppointments 
    loadCustomFeedback(); 
});

它工作正常。問題發生在數據加載到div 的某段時間，但該指示器確實隱藏了它自己。大部分時間它工作正常。

你能告訴我，如果這是因爲多個同時發生的AJAX調用？如果有任何解決方法。從函數調用

來源

2016-12-16 Waheed Asghar

1）添加代碼2）將在以一個代碼段或代碼塊中的代碼，而不是明文 – Device

你需要編寫一個管理ajax請求的服務，並在每個請求中顯示指示符。響應或錯誤後，您可以停止指示。 –

@ user3087839我這樣做因爲它不是服務，但我隱藏AJAX結果的指標。出錯時還有另一種情況。當數據被填充到div中時，Rest Assured AJAX調用成功。 –

return$.getJSON()呼叫，使用$.when()，.then()到鏈中的異步調用內$.when()

$(function() { 

    var loadingDivs = "#up-appointments,#mySales,#todays-appointments" 
         + ",#today-performance,#c-feed"; 
    $(loadingDivs).Loading(); 

    $.when(loadPerformanceModal() 
     , loadAppointments() 
     .then(function() {return loadPTOs()})// should be right after  
     , laodAppointments() 
     , loadMySales() 
     , loadUpCommingAppointments() 
     .then(function() {return loadUpCommingPTOs()}) // should be right after 
     , loadUpCommingAppointments() 
     , loadCustomFeedback() 
    ) 
    .then(function(...responses) { 
     console.log(responses) 
    }) 
    .fail(function(jqxhr, textStatus, errorThrown) { 
     console.log(errorThrown) 
    }); 
});

來源

2016-12-16 18:00:18 guest271314

多個加載指標的多個AJAX調用

回答

相關問題