Question

嘿我有一个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();
}

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

Answer 1

您正在进行异步请求，但同步处理加载屏幕。您需要在成功函数中删除此div，并且您可能需要一些方法来计算您仍然打开的请求数。

Answer 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++;
     });

}

Answer 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
  }
});

所有ajax调用完成后，将显示加载屏幕

3 个答案: