21 декабря 2009

JQuery: Ajax-loader для нескольких одновременных запросов

В jquery есть простой способ показать индикатор загрузки при AJAX запросе. Здесь он описан достаточно подробно. Но у него есть одна неприятная проблема: если одновременно отправляется несколько запросов, по завершении первого индикатор отключается. В моем же случае, я показывал индикатор как бы в модальном окне (см. Модальное окно: jquery + CSS), чтобы предотвратить возможные клики по странице во время загрузки. Возможно, это в какой-то мере убивает идею асинхронности, но зато позволяет сохранить целостность данных. Я решил проблему банальным счетчиком, хотя, не уверен, что это достаточно хорошо.

ajax_counter = 0 // количество отправленных запросов
$("#loading").bind("ajaxSend", function(){
ajax_counter++ // еще один запрос отправлен
$(this).show()
}).bind("ajaxComplete", function(){
if(!(--ajax_counter)) // если это не последний запрос из отправленных,
return //выходим
$(this).hide()
})

1 комментарий:

Анонимный комментирует...

Сам только что столкнулся с этой задачей. Получасовым поиском был найден ответ:
Следует внести изменения в опции метода ajax для каждого конкретного запроса (complete: ). а не использовать глобальный event.