使用jquery加載消息

Question

我有這個加載消息，而我的ajax調用檢索數據。但是我得到了奇怪的結果。要麼消息出現，並且中途呈現，直到ajax完成或者完全出現，讓用戶想知道什麼是錯誤的。我需要一個加載消息的原因是，當檢索數據時，它的延遲時間大約爲5-10秒，對話框打開後繪製地圖，然後使用標籤重繪地圖的要素圖層。

這裏是我的代碼：

function loadData(v) 
{  
    var reg = 1; 
    var vId = v;      
    var d = 
    { 
     regionType: reg, 
     varId: vId 
    }; 

    //$("#loading").ajaxStart(function() { 
    // $(this).show(); 
    //}).ajaxStop(function() { 
    // $(this).hide(); 
    //}); 

    $("#loading").ajaxStart(function() { 
     $(this).show(); 
    }); 

    $.ajax({ 
     type: "GET", 
     url: WebRoot + "ws/bis.asmx/Data", 
     data: d, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) {     

      fipsData = data.d; 
      openBox(d); 
      init(regType, varId); 

      $("#loading").ajaxStop(function() { 
       $(this).hide(); 
      }); 

     } //ends success function 
    }); //ends ajax call   
}; //ends message 

Answer 1

無需爲ajaxStart或ajaxStop

function loadData(v) 
{  
    var reg = 1; 
    var vId = v; 
    var $loading = $("#loading");      
    var d = 
    { 
     regionType: reg, 
     varId: vId 
    }; 


    // Starts immediately after this line so no need to use ajaxStart 
    $loading.show(); 

    $.ajax({ 
     type: "GET", 
     url: WebRoot + "ws/bis.asmx/Data", 
     data: d, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) {     

      fipsData = data.d; 
      openBox(d); 
      init(regType, varId); 

     }, //ends success function 

     // Fires even if a failure, so loading spinner won't hang around for no reason 
     done: function() { 
      $loading.hide(); 
     } 
    }); //ends ajax call   
}; //ends message 

Answer 2

如果你在使用ajaxStop和ajaxStart設置，那麼你應該移動ajaxStop處理器之外成功回調。

$("#loading").ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
}); 

    $.ajax({ 
     type: "GET", 
     url: WebRoot + "ws/bis.asmx/Data", 
     data: d, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) {     

      fipsData = data.d; 
      openBox(d); 
      init(regType, varId); 

     } //ends success function 
    }); //ends ajax call 

Answer 3

問題是 「這個」

$.ajaxStart(function() { 
    $("#loading").show(); 
}); 

「這個」 變量的變化取決於你的函數是如何被調用。

http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

上面的鏈接可以是一個良好的開端，以瞭解更多關於js函數調用！