在所有 ajax 调用完成后显示加载屏幕答案

【问题标题】：Loading screen shows up after all the ajax calls have finished在所有 ajax 调用完成后显示加载屏幕
【发布时间】：2011-06-11 03:05:30
【问题描述】：

嘿，我有一个 ajax 调用的问题。我正在尝试显示一个加载屏幕，它基本上是一个 div，它在发出 10 个 ajax 请求时显示和隐藏。它似乎在 Firefox 3.6 中工作正常，但 div 没有出现在 chrome 10 和 IE8 中。问题是 div 出现了，但它只显示了几毫秒，然后才被隐藏，尽管它在 ajax 调用之前被打开。这是函数：

function addAllToPlaylist() {
    var title;
    var i = 1;
    var percentage = 0;
    var total = $('.tdtrackname').size();
     $('#loadingscreen').show();
     $('.tdtrackname').each(function() {
        $.ajax({
        async: false,
        url: 'ajax/addsongtoplaylist.php?query=' + $(this).html(),
        success: function(data) {
            $('#divajax').html(data);
            percentage = Math.round((i / total) * 100);
            $('#loadingmsg').html('<h3>Adding songs...please wait<br>' + i + ' / ' + total + ' (' + percentage + '%)</h3>');
        }
      });
      i++;
     });
   $('#loadingscreen').hide();
}

我希望你能帮我解决这个问题，我不知道为什么加载屏幕打开这么晚.. 提前致谢

【问题讨论】：

不是您的问题的答案，但将您的所有请求合并为一个大请求不是更好吗？我曾经有过类似的请求，并设法将 7s 加载变为 2s 加载。它也可以解决您的同步/异步问题。

标签： jquery ajax internet-explorer google-chrome loading

【解决方案1】：

您正在发出异步请求，但同步处理加载屏幕。您需要在成功函数中删除此 div，并且您可能需要某种方法来计算您仍有多少请求处于打开状态。

【讨论】：

我试过把 if (i == total) { $('#loadingscreen').hide(); } 在成功函数中，但它也不起作用。问题是在 each() 函数完成之前加载屏幕不会显示...
@robs - 您需要将 i 和 total 放入全局变量中才能正常工作，因为调用成功函数时它不存在。
好的，但可以说我根本不想删除加载屏幕，我删除了 hide() 函数。现在加载屏幕确实显示了，但是为什么在所有 ajax 调用完成后才显示？我希望它在他们开始之前出现

【解决方案2】：

如果你愿意，你可以拥有它。

function addAllToPlaylist() {
    var title;
    var i = 1;
    var percentage = 0;
    var total = $('.tdtrackname').size();
     $('#loadingscreen').show();

    percentage = Math.round((i / total) * 100);
            $('#loadingmsg').html('<h3>Adding songs...please wait<br>' + i + ' / ' + total + ' (' + percentage + '%)</h3>');

     $('.tdtrackname').each(function() {
        $.ajax({
        async: false,
        url: 'ajax/addsongtoplaylist.php?query=' + $(this).html(),
        success: function(data) {
            $('#divajax').html(data);
            $('#loadingscreen').hide();
        }
      });
      i++;
     });

}

【讨论】：

这将在第一个请求返回后隐藏加载屏幕，我认为这不是 OP 想要的。
正是..我想在each()函数完成后隐藏加载屏幕

【解决方案3】：

你可以在ajax调用之后使用always函数，将它们完全链接起来，然后当所有ajax调用完成后，关闭div。这可以使用指定的 always 函数内的计数器来完成。

例子：

var methodCounter = 0;

$.ajax({
  success: function(d) {
  },
  url: 'xxx',  //Where xxx is the url being hit
}).always(function() {
  methodCounter++;
  if (methodCounter == limit) { //limit is the number of times to do the ajax call before closing the dialog box
    //Hide the dialog box here
  }
});

【讨论】：