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

所有3个功能都是同步的。这意味着他们会在很短的时间内一个接一个地跑。异步函数需要时间并且有回调，因此您可以在完成后执行操作。例如：

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

“removeClass”函数将在加载“element”后运行。

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

Google图表可视化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在范围内。

在执行函数之前显示加载图标

3 个答案: