Как отследить завершение всех ajax запросов на странице?

Question

[uaf0x]

Собственно задача такая, нужно в цикле запустить N запросов к серверу, после выполнения всех запросов нужно будет пустить ещё 1 контрольный. Как отследить завершение всех запросов ajax на странице ?

Сейчас мой говнокод выглядет так :

jQuery('.btn-primary').on('click', function(event) {
		event.preventDefault();
		for (var i = 0; i <= jQuery('#count').val(); i++) 
		{
			var form = jQuery('.form-horizontal').serializeArray();
			jQuery.ajax({
				url: 'myurl',
				type: 'POST',
				data: {form, i},
					success:function(data)
					{
						jQuery('.cool').append(data);
					}			
			});

		}		
	});

Очень буду рад и счастлив конструктивным предложением.

PS
Предложения аля учи мат часть можете не писать и так в процессе :)

Answer 1

[Алексей Уколов]

Да, конечно, можно смотреть на значение внешнего счетчика с определенным интервалом...
Но можно сразу сделать нормально:

var form = {foo: 'bar'},
    requests = [],
    index,
    $xhr;

for (var index = 0; index <= 5; index++) {
    $xhr = $.post('myurl', {'form': form, 'index': index});

    $xhr.done(function (data) {
        console.log('request done');
    });

    requests.push($xhr);
}

$.when.apply($, requests).done(function () {
    console.log('all done');
})

P.S. Как сделать так, чтобы функция выполнялась только после того, как другая завершится?

Comments

[uaf0x]

Я не совсем понял что такое requests и $xhr, распиши пожалуйста подробнее. Неохото в тупую код копировать

[Алексей Уколов]

requests - это массив всех запросов, окончания которых нужно дождаться. А $xhr - это Deferred объект, который возвращают все ajax-вызовы. Лучше, чем в официальной документации я не объясню.

[uaf0x]

Ок, такой момент ещё, у меня некоторые запросы возвращают error, как их обрабатывать ?
Или Done является универсальной функицей ?)

[Алексей Уколов]

Для обработки ошибок существует fail. Но если у вас запросы могут не выполниться, то решение с when вам не подойдет - вам нужно изучить промисы и придумать такую схему их использования, которая подойдет для вашей конкретной ситуации.

[uaf0x]

Алексей Уколов: Спасибо, буду думать)
Тогда допилю свой код, а это будет как подсказка для новых реализаций. Спасибо.

Answer 2

[Super User]

Сделать с помощью метода ajaxStop:

$( document ).ajaxStop(function() {
     $('.cool').append(data);  
});

Comments

[Алексей Уколов]

И как конкретно это поможет автору в решении его задачи? То, что вы предлагаете, это фактически замена success-callback для бедных.

[Super User]

Поправочка. Я изменил ответ.

[Алексей Уколов]

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

[Super User]

Алексей Уколов: Это один из вариантов. Этот вопрос будут смотреть другие люди, находя его через поиск и у них могут быть другие условия задачи.

[Алексей Уколов]

Именно для них я комментарии и пишу. Ваше решение, на самом деле, приемлемо только для очень узкого спектра задач. Но даже для этого спектра промисы - гораздо лучше решение. Программы, построенные на использовании побочных эффектов очень ненадежны.

[mlstart]

Мне этот вариант подошел. Не ругайте человека, может под задачу автора не подходит, но смежные вопросы помогает других людям по схожим поисковым запросам решать. Просто, быстро.

Answer 3

[Иван]

Ну как вариант сделать счетчик, и при вызове запроса прибавлять его, а при окончании или ошибке вычитать. При нуле все запросы закончатся.