Экран загрузки отображается после завершения всех вызовов ajax

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

Если хотите, вы можете сделать это так.

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 2

Вы можете использовать функцию always после вызовов ajax, объединить их в цепочку, а затем, когда все вызовы ajax завершатся, закрыть div.Это можно сделать с помощью счетчика внутри указанной всегда функции.

Пример:

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

Answer 3

Вы делаете асинхронные запросы, но синхронно работаете с экраном загрузки.Вам нужно удалить этот div в функции успеха, и вам, вероятно, понадобится подсчитать, сколько запросов у вас все еще открыто.