Question

我正在尝试根据我的需求调整此解决方案：How can I create a "Please Wait, Loading..." animation using jQuery?

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

所以我试过的是这个：

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

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

任何想法如何让我的工作？如果需要，我可以提供有关中间函数的更多详细信息。

干杯

Answer 1

这是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调用失败也应该删除加载类。

Answer 2

您可以向函数添加一个回调，以便在完成后，它将调用您的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的末尾。如果身体目前没有上课，则不会做任何事情。

Answer 3

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

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

在你的代码中，addClass和removeClass的执行速度非常快，就像从未发生过一样。

jQuery加载窗口，等待很长的功能完成

3 个答案: