0

我试图在执行功能之前显示一个加载图标，但我不知道如何做到这一点。

我的代码：

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

在图表实际加载后，它会显示一个加载图标（如果 removeClass() 已注释掉）。如果有人知道解决方案，请现在告诉我。

我尝试使用 setTimeOut()，jQuery 的 when，然后完成，但似乎没有任何效果。

我正在使用 Google 的可视化图表来显示各种图表。我可以通过单击图标在图表之间切换。

之后，上面的函数将被执行。

函数changeChartType()：

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

在 drawChart 中它只是调用 chart.draw(); 这需要一段时间，因此我想显示一个加载图标。

问题不在于删除加载图标，而是通过添加类来显示加载图标。目前它在绘制图表后添加类。也许有办法同步这个。

4

3 回答 3

0

Google 图表可视化 API的draw方法是异步的，这反过来又使您的整个函数链异步。您需要做的是监听由所有这些混乱引发的事件并采取相应的行动。该事件在此处定义和描述。

为了让它工作，你需要对你的代码进行相当多的检查。这是最简单的方法：

$(".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在范围内。

于 2013-05-08T14:39:24.070 回答
0

您的所有 3 个功能都是同步的。这意味着它们会在很短的时间内一个接一个地运行。异步函数需要时间并且有回调，所以你可以在它们完成后做一些事情。例如：

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

“删除类”函数将在“元素”加载后运行。

于 2013-05-08T14:36:53.523 回答
0

在 changeChartType 函数完成之前运行的包装器删除行。如果没有以某种方式包装到前面的函数，removeClass 函数将在它被读取后立即触发，这可能在前面的函数完成之前。

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

我没有对此进行测试，但除了错别字之外，这个想法应该可行。

这是 when/done 文档的链接：http: //api.jquery.com/jQuery.when/

于 2013-05-08T14:37:39.133 回答