0

我正在尝试使此解决方案适应我的需求：如何使用 jQuery 创建“请稍候，正在加载...”动画？

基本上，提供了一个非常棒的方案来包装 Ajax 请求和一个很好的加载 GUI。我正在尝试对我拥有的进行一些计算然后将一些图形附加到 DOM 的函数执行相同的操作。

所以我尝试过的是：

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

不幸的是，在 long_time_taking_function() 执行之前或之后，似乎该类被添加然后立即删除。但是我知道添加类是有效的，因为注释掉 removeClass() 调用会使 gif 浮动在页面上。

有什么想法可以让我完成这项工作吗？如果需要，我可以提供有关中间函数的更多详细信息。

干杯

4

3 回答 3

3

这是 AJAX 的一个常见缺陷：第一个“A”代表“异步”。这意味着 AJAX 调用立即返回并或多或少地“在后台”运行。 long_time_taking_function()包含一个 AJAX 调用。您只需将其移至$('body').removeClass('loading')AJAX 调用的回调中。如果你使用的是 jQuery（假设你是因为你标记了），它看起来像这样：

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

编辑：这里的 jQuery Deferred 对象的回调应该是always()，因为即使 ajax 调用失败，也应该删除加载类。

于 2012-07-30T23:31:37.817 回答
1

您可以向您的函数添加回调，以便在完成后，它将调用您的 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-31T00:20:25.557 回答
0

你需要做这样的事情......

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

在您的代码中，addClass 和 removeClass 执行得如此之快，就好像什么都没发生过一样。

于 2012-07-30T23:32:29.613 回答