在執行函數之前顯示加載圖標

Question

我試圖在執行函數之前顯示加載圖標，但我沒有線索如何執行此操作。

我的代碼：

$(".chartType").on("click", function(event){ 
    $("#wrapper").addClass("loading");  
    changeChartType($(this).attr("value"));  
    $("#wrapper").removeClass("loading"); 
}); 

它顯示了一個加載圖標（如果removeClass（）註釋掉）圖表實際上已經被加載後。如果有人知道解決方案，請立即告訴我。

我試過使用setTimeOut（），jQuery的時候，然後做，但似乎沒有任何工作。

我使用Google的可視化圖表來顯示各種圖表。我可以通過點擊圖標在圖表之間切換。

之後，上面的函數將被執行。

功能changeChartType（）：

function changeChartType(typePar){ 
    chartType = typePar; 
    chart = new google.visualization[chartType](chartDiv); 
    drawChart(); 
} 

而且在drawChart它只是調用chart.draw（）; 這需要一段時間，因此我想顯示一個加載圖標。

問題不在於刪除加載圖標，而是通過添加類來顯示加載圖標。目前它在繪製圖表後添加該類。也許有一個同步這個。

Answer 1

你的所有功能都是同步的。這意味着他們在很短的時間內陸續運行。 異步函數需要時間和回調，所以你可以在完成之後做些事情。 例如：

$(".chartType").on("click", function(event){ 
    $("#wrapper").addClass("loading");  
    $("element").on("load",function(){ 
     $("#wrapper").removeClass("loading"); 
    });  
}); 

「removeClass」 功能將 「元件」 後運行時加載。

Answer 2

您的包裝在changeChartType函數完成之前刪除行運行。如果不以某種方式包裝到上一個函數中，removeClass函數會在讀取完成後立即觸發，這可能是在前一個函數完成之前。

$(".chartType").on("click", function(event){ 
$("#wrapper").addClass("loading"); 
$.when({ changeChartType($(this).attr("value")) }).done(
    $("#wrapper").removeClass("loading"); 
); }); 

我還沒有測試過這個，但是打錯了，這個想法應該工作。

這裏的時候/完成文檔的鏈接：http://api.jquery.com/jQuery.when/

Answer 3

的谷歌圖表可視化API的draw方法是異步的，這又是對整個函數鏈異步。你需要做的就是傾聽由所有這些混亂所引發的事件並採取相應的行動。該事件被定義並描述爲here。

爲了達到這個目的，您需要對代碼進行相當多的修改。這裏是這樣做的最簡單的方法：

$(".chartType").on("click", function(event){ 
    $("#wrapper").addClass("loading"); 
    var chart = new google.visualization[$(this).attr("value")](chartDiv); 
    google.visualization.events.addListener(chartDiv, 'ready', function() { $("#wrapper").removeClass("loading") }); 
    chart.draw(); 
}); 

這應該工作，但它假定chartDiv是在範圍之內。