jQuery加载窗口，同时等待长函数完成

jQuery loading window while waiting for long function to finish

本文关键字：函数 等待 加载 窗口 jQuery      更新时间：2024-05-05

我正在努力使这个解决方案适应我的需求：我如何创建一个"请稍候，正在加载"使用jQuery制作动画？

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

所以我尝试的是：

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

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

你知道我该怎么做吗？如果需要，我可以提供更多关于中间功能的详细信息。

干杯

这是AJAX的一个常见缺陷：第一个"a"代表"异步"。这意味着AJAX调用会立即返回，并或多或少地"在后台"运行。long_time_taking_function()包含一个AJAX调用。您只需要将$('body').removeClass('loading')移动到AJAX调用的回调中。如果你正在使用jQuery（假设你已经标记了jQuery），它会看起来像这样： 
$.ajax({
    ...options...
}).always(function(response) {
    $('body').removeClass('loading');
});

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

您可以向函数添加回调，以便在函数完成时调用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);

或者，您可以在函数long_time_taking_function的末尾添加一行$("body").removeClass("loading");。如果主体当前没有类，它将不会执行任何操作。

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

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

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

相关文章：