Как завершить все ajax запросы на jquery. Вы я верен знаете, что все события в JavaScript происходят последовательно. То, что называется асинхронным ajax запросом, на самом деле ем что иное, как цепь последовательных событий. И так случается, то если запросы происходят к одному серверу, что пока не завершится один запрос, другой будет висеть в воздухе. В связи с этим возникла необходимость, обрубать все текущие ajax запросы, при инициализации нового. Как это сделать?
Как это работает при обычном запросе.
var xhr = $.get('index.php'), // первый запрос xhr2 = $.get('index2.php'); // второй запросxhr.abort();// рубим егоxhr2.abort();// рубим егоxhr = $.get('dsds.php'); // третий запрос |
Но, что если у Вас нет возможности запоминать все запросы в переменную, а обрубить надо их все.
На помощь придет сама jQuery. Дело в том, что при каждом ajax запросе, jQuery вызывает ряд обработчиков.
1 2 3 4 | jQuery.ajaxStart() - при отправке любого запросаjQuery.ajaxSuccess() - при благополучном завершении любого запроса jQuery.ajaxError() - при не благополучном завершении любого запроса jQuery.ajaxComplete() - при завершении любого запроса |
Повесить обработчик на событие можно, точно также, как и на любые другие
1 2 3 | jQuery.ajaxStart(function(){ alert('ajax запрос начат')}) |
Воспользуемся этим, и при каждом запросе. будем запоминать его xhr
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $.xhrPool = [];$.xhrPool.abortAll = function() { $(this).each(function(idx, jqXHR) { jqXHR.abort(); }); $.xhrPool.length = 0};$.ajaxSetup({ beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, complete: function(jqXHR) { var index = $.xhrPool.indexOf(jqXHR); if (index > -1) { $.xhrPool.splice(index, 1); } }}); |
В детали вдаваться не стану. Суть думаю ясна. Все запросы складируются в массив $.xhrPool, и чтобы завершить все текущие запросы, просто нужно вызвать метод
1 | $.xhrPool.abortAll(); |
вот и все, теперь можно начинать все с нуля.
Конечно можно писать все первым способом, это просто. А можно делать все по уму, тогда поддерживать такой код станет намного проще, ведь никаких изменений в аш первоначальный код вносить не надо. Это и есть парадигма разделения кода, которую несет ООП и событийное программирование.
Комментарии