Как отловить завершение всех Ajax-запросов?

Question

[Владимир Тютимов]

Здравствуйте! У меня есть функция, которая в цикле посылает Ajax-запросы и возвращает данные с сервера. Мне необходимо на время, пока эти запросы выполняются повесить "загрузчик".
Пытаюсь делать так:

$("#page_loader").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

Ничего не получается. Если обрабатывать события AjaxSend и AjaxComplete, то получается, но при этом "загрузчик", то появляется, то пропадает. Ведь эти события локальны для запроса.
Как решить эту задачу?

UPD1:
Вот код скрипта:

function getphotoallalbum() {
    var ier = 0;
    $.each(itm, function (i, item) {
        ier += 500;
        setTimeout(function(){
            var grp = $("#GroupBase :selected").val();
            var albm = item.id;
            $.post("drs.php", {groupid: grp, albumid: albm},
            function (data) {
                $('.console').after('<p>' + data + '</p>');
                //console.log(data);
            });
    }, ier);

    });
    getcountbase();
}

Answer 1

[Rsa97]

Добавить глобальный счётчик. По отправке запроса - увеличивать и включать показ загрузки, по завершении запроса - уменьшать, когда станет 0 отключать показ.

Comments

[Владимир Тютимов]

добавил код скрипта, Ваше решение как вариант. Но хочется разобраться как работать с событиями ajaxStart и ajaxStop.

[Илья Шатохин]

Владимир: а что тут разбираться, начинается ajax - срабатывает событие ajaxStart, заканчивается - срабатывает событие ajaxStop. Т.к. у вас несколько запросов одновременно, загрузчик скачет туда-сюда. Rsa97 указал вам на верное решение.

Можете один раз глобально определить:

(function () {
  var counter = 0;
  
  $(document).bind("ajaxStart", function(){
      counter++;
      if (counter === 1) // чтобы лишний раз не дергать show анимацию
        $("#page_loader").show(); 
  }).bind("ajaxStop", function(){
      counter--;
      if (counter === 0)
        $("#page_loader").hide();
  });
})();

[Rsa97]

Владимир: В документации вроде указано, что эти события вешаются только на document.

[Rsa97]

Илья Шатохин: По документации - ajaxStart вызывается только если ещё нет активных запросов, ajaxStop - только если завершается последний активный запрос.

[Rsa97]

Илья Шатохин: Но если запрос успевает завершиться до выдачи следующего, то всё равно загрузчик будет дёргаться, какой метод не используй. Тогда ставить небольшой таймаут на декремент счётчика.

[Илья Шатохин]

Rsa97: до JQ 1.8 можно было вешать на что угодно и не было проверки на активные запросы.

[Владимир Тютимов]

Rsa97: вот теперь стало яснее, спасибо. Тоже прочитал, что вешать можно на любой элемент. Повесил на document и все заработало. Но я правильно понял, что так не правильно делать? Или все нормально?

[Rsa97]

Владимир: Так можно делать, но если запрос успеет завершиться до начала следующего запроса, то всё равно моргнёт загрузчик. Тогда можно добавить на ajaxStop таймер, отключающий загрузчик, а на ajaxStart сброс этого таймера, если он активен.

[Владимир Тютимов]

Rsa97: спасибо!