jQuery的裝載時限在等待很長的功能來完成

我試圖適應這種解決方案我的需求：How can I create a "Please Wait, Loading..." animation using jQuery?jQuery的裝載時限在等待很長的功能來完成

主要是提供一個真正真棒方式來包裝一個漂亮的裝載GUI Ajax請求。我試圖做一個函數，我做了一些計算，然後附加一些圖形的DOM。

所以我已經試過是這樣的：

$("body").addClass("loading"); 
long_time_taking_function(mainDiv); 
$("body").removeClass("loading");

不幸的是，看起來好像類是之前或之後long_time_taking_function相加，然後立即取出，（）執行。但是我知道添加類是可行的，因爲註釋掉removeClass（）調用會使gif在頁面上浮動。

任何想法，我可以使這項工作？如果需要，我可以提供有關中間函數的更多詳細信息。

乾杯

來源

2012-07-30 JDS

是的，'long_time_taking_function'的內容絕對值得讚賞。 – 2012-07-30 23:35:54

它這樣做： 1.按特定字段對大JSON對象排序 2.創建一個高圖對象（http://www.highcharts.com/）並將其附加到主div元素就這些了。 – JDS 2012-07-30 23:58:45

你在哪裏得到大的JSON對象？ – 2012-07-31 00:07:18

這是AJAX的一個常見問題：第一個「A」代表「異步」。這意味着AJAX調用會立即返回，並在後臺運行或多或少。 long_time_taking_function()包含一個AJAX調用。您只需將該$('body').removeClass('loading')移入AJAX調用的回調。如果你正在使用jQuery（假設你是因爲你標記jquery），它會是這個樣子：

$.ajax({ 
    ...options... 
}).always(function(response) { 
    $('body').removeClass('loading'); 
});

編輯：這裏的jQuery的Deferred對象的回調應該是always()，作爲加載類應該甚至刪除如果ajax調用失敗。

來源

2012-07-30 23:31:37

我不認爲我使用AJAX。因此，我爲什麼提出這個話題。我所有的功能都是通過添加一些JavaScript生成的圖像來更新DOM，那麼這是否算作AJAX？ – JDS 2012-07-30 23:51:46

你需要做這樣的事情......

$("body").addClass("loading"); 
doSomething(url,params) 
    .complete(function() { 
    $("body").removeClass("loading"); 
    });

在你的代碼，addClass與removeClass執行這麼快就好像什麼事也沒發生過。

來源

2012-07-30 23:32:29

你可以添加一個回調到你的函數，這樣當它完成時，它會調用你的removeClass語句。

事情是這樣的：

 //declare your functions 
    function long_time_taking_function(mainDiv, callback){ 

     //...your code... 
     callback(); 
    } 

    function removeLoadGif(){ 
     $("body").removeClass("loading"); 
    } 



    //in your current code call this 
    $("body").addClass("loading"); 
    long_time_taking_function(mainDiv, removeLoadGif);

或者你可以只添加一行$("body").removeClass("loading");你的函數long_time_taking_function結束。如果身體目前沒有班級，那麼它什麼都不會做。

來源

2012-07-31 00:20:25 Jlange

jQuery的裝載時限在等待很長的功能來完成

回答

相關問題