Остановите все активные запросы AJAX в JQuery

216

У меня проблема, при отправке формы все активные запросы AJAX сбой, и это вызывает событие ошибки.

Как остановить все активные запросы ajax в jQuery без события ошибки trigerring?

jquery ajax umpirsky
источник

273

Каждый раз, когда вы создаете ajax-запрос, вы можете использовать переменную для его хранения:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

Затем вы можете прервать запрос:

request.abort();

Вы можете использовать массив, отслеживающий все ожидающие ajax-запросы, и при необходимости прервать их.

Дарин димитров
источник

THXs, я добавил флаг, потому что я использовал несколько запросов одновременно

jcho360

вот простой рабочий пример: stackoverflow.com/a/42312101/3818394

Dharmesh Патель

у меня есть вызов ajax в функции, как я могу прервать его?

Kalariya_M

Переменная должна быть объявлена глобальной, чтобы получить доступ к ней из другой функции, когда выполняется вызов ajax. пример: процесс загрузки нескольких файлов.

Клин Дсилва

180

Следующий фрагмент позволяет вам поддерживать список ( пул ) запросов и отменять их все при необходимости. Лучше всего размещать в <HEAD>своем html, прежде чем будут сделаны любые другие вызовы AJAX.

<script type="text/javascript">
    $(function() {
        $.xhrPool = [];
        $.xhrPool.abortAll = function() {
            $(this).each(function(i, jqXHR) {   //  cycle through list of recorded connection
                jqXHR.abort();  //  aborts connection
                $.xhrPool.splice(i, 1); //  removes from list by index
            });
        }
        $.ajaxSetup({
            beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, //  annd connection to list
            complete: function(jqXHR) {
                var i = $.xhrPool.indexOf(jqXHR);   //  get index for current connection completed
                if (i > -1) $.xhrPool.splice(i, 1); //  removes from list by index
            }
        });
    })
</script>

mkmurray
источник

2

@mkmurray - при инициализации в IE8 мне кажется Object doesn't support property or method 'indexOf'? Я подозреваю, что это может быть stackoverflow.com/a/2608601/181971 или, может быть, просто заменить на stackoverflow.com/a/2608618/181971 ?

Тим

3

@grr прав, посмотрите его ответ и проверьте документы на ajaxSetup .

kzfabi

@Tim - как предложил Стивен, вместо var index = $ .xhrPool.indexOf (jqXHR); используйте: var index = $ .inArray (jqXHR, $ .xhrPool);

Кристофер

1

@mkmurray: он показывает TypeError: jqXHR.abort не является функцией для меня. :(

Шеша

В методе abortAll есть небольшая логическая ошибка, которая исправлена здесь в этом ответе stackoverflow.com/a/45500874/1041341

Сарин Дж. С.

122

Использование ajaxSetup не является правильным , как отмечено на его странице документации. Он только устанавливает значения по умолчанию, и если некоторые запросы переопределяют их, будет беспорядок.

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

// Automatically cancel unfinished ajax requests 
// when the user navigates elsewhere.
(function($) {
  var xhrPool = [];
  $(document).ajaxSend(function(e, jqXHR, options){
    xhrPool.push(jqXHR);
  });
  $(document).ajaxComplete(function(e, jqXHR, options) {
    xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
  });
  var abort = function() {
    $.each(xhrPool, function(idx, jqXHR) {
      jqXHR.abort();
    });
  };

  var oldbeforeunload = window.onbeforeunload;
  window.onbeforeunload = function() {
    var r = oldbeforeunload ? oldbeforeunload() : undefined;
    if (r == undefined) {
      // only cancel requests if there is no prompt to stay on the page
      // if there is a prompt, it will likely give the requests enough time to finish
      abort();
    }
    return r;
  }
})(jQuery);

ГРР
источник

Как вызвать метод abort () из других функций?

Стэн Джеймс

Прервать это функция, а не метод. вы вызываете его из той же инкапсуляции, как обычно, если вам нужно использовать его вне инкапсуляции, вы можете удалить «var» перед именем функции, и он станет общедоступной функцией

Trey

Привет, кто-то может объяснить, когда г будет неопределенным?

Варун

36

Вот что я сейчас использую для этого.

$.xhrPool = [];
$.xhrPool.abortAll = function() {
  _.each(this, function(jqXHR) {
    jqXHR.abort();
  });
};
$.ajaxSetup({
  beforeSend: function(jqXHR) {
    $.xhrPool.push(jqXHR);
  }
});

Примечание: _.each of underscore.js присутствует, но явно не обязательно. Я просто ленивый и не хочу менять его на $ .each (). 8P

Энди Ферра
источник

2

У меня есть слегка измененное решение, которое прекрасно работает, и я собираюсь опубликовать его.

mkmurray

7

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

Бехранг Саидзаде

5

@BehrangSaeedzadeh Вы также должны были опубликовать улучшенную версию.

mattsven

19

Дайте каждому запросу xhr уникальный идентификатор и сохраните ссылку на объект в объекте перед отправкой. Удалить ссылку после завершения запроса xhr.

Чтобы отменить все запросы в любое время:

$.ajaxQ.abortAll();

Возвращает уникальные идентификаторы отмененного запроса. Только для целей тестирования.

Рабочая функция:

$.ajaxQ = (function(){
  var id = 0, Q = {};

  $(document).ajaxSend(function(e, jqx){
    jqx._id = ++id;
    Q[jqx._id] = jqx;
  });
  $(document).ajaxComplete(function(e, jqx){
    delete Q[jqx._id];
  });

  return {
    abortAll: function(){
      var r = [];
      $.each(Q, function(i, jqx){
        r.push(jqx._id);
        jqx.abort();
      });
      return r;
    }
  };

})();

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

Рефик
источник

17

Я нашел это слишком легко для нескольких запросов.

шаг1: определить переменную в верхней части страницы:

  xhrPool = []; // no need to use **var**

step2: установить beforeSend во всех запросах ajax:

  $.ajax({
   ...
   beforeSend: function (jqXHR, settings) {
        xhrPool.push(jqXHR);
    },
    ...

шаг 3: используйте его там, где вам нужно:

   $.each(xhrPool, function(idx, jqXHR) {
          jqXHR.abort();
    });

Дхармэш патель
источник

Это приводит к утечке памяти, как это делает stackoverflow.com/a/6618288/1772379 , и по тем же причинам.

Бен Джонсон

Действительно ужасный способ написания JavaScript.

Озил

1

может быть в конце вы можете очистить / очистить массив xhrPool

космическая земля

6

Я расширил mkmurray и ответ SpYk3HH выше, чтобы xhrPool.abortAll мог прервать все ожидающие запросы данного URL :

$.xhrPool = [];
$.xhrPool.abortAll = function(url) {
    $(this).each(function(i, jqXHR) { //  cycle through list of recorded connection
        console.log('xhrPool.abortAll ' + jqXHR.requestURL);
        if (!url || url === jqXHR.requestURL) {
            jqXHR.abort(); //  aborts connection
            $.xhrPool.splice(i, 1); //  removes from list by index
        }
    });
};
$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR); //  add connection to list
    },
    complete: function(jqXHR) {
        var i = $.xhrPool.indexOf(jqXHR); //  get index for current connection completed
        if (i > -1) $.xhrPool.splice(i, 1); //  removes from list by index
    }
});
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    console.log('ajaxPrefilter ' + options.url);
    jqXHR.requestURL = options.url;
});

Использование такое же, за исключением того, что abortAll теперь может опционально принимать URL-адрес в качестве параметра и отменяет только ожидающие вызовы этого URL-адреса.

kofifus
источник

5

У меня были некоторые проблемы с кодом Энди, но он дал мне отличные идеи. Первая проблема заключалась в том, что мы должны выталкивать любые объекты jqXHR, которые успешно завершены. Я также должен был изменить функцию abortAll. Вот мой последний рабочий код:

$.xhrPool = [];
$.xhrPool.abortAll = function() {
            $(this).each(function(idx, jqXHR) {
                        jqXHR.abort();
                        });
};
$.ajaxSetup({
    beforeSend: function(jqXHR) {
            $.xhrPool.push(jqXHR);
            }
});
$(document).ajaxComplete(function() {
            $.xhrPool.pop();
            });

Мне не понравился способ работы ajaxComplete (). Независимо от того, как я пытался настроить .ajaxSetup, он не работал.

Хэмпстер
источник

7

Я думаю, что вы, возможно, звоните поп по неправильному запросу, если они не завершены в определенном порядке?

jjmontes

1

Да, вы хотите сделать ломтик вместо поп-музыки. У меня есть слегка измененное решение, которое я собираюсь опубликовать.

mkmurray

4

Я обновил код, чтобы он работал у меня

$.xhrPool = [];
$.xhrPool.abortAll = function() {
    $(this).each(function(idx, jqXHR) {
        jqXHR.abort();
    });
    $(this).each(function(idx, jqXHR) {
        var index = $.inArray(jqXHR, $.xhrPool);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    });
};

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.inArray(jqXHR, $.xhrPool);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    }
});

Стивен
источник

4

Вбрасывание моей шляпы. Предлагает abortи removeметоды против xhrPoolмассива, и не склонен к проблемам с ajaxSetupпереопределениями.

/**
 * Ajax Request Pool
 * 
 * @author Oliver Nassar <onassar@gmail.com>
 * @see    http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery
 */
jQuery.xhrPool = [];

/**
 * jQuery.xhrPool.abortAll
 * 
 * Retrieves all the outbound requests from the array (since the array is going
 * to be modified as requests are aborted), and then loops over each of them to
 * perform the abortion. Doing so will trigger the ajaxComplete event against
 * the document, which will remove the request from the pool-array.
 * 
 * @access public
 * @return void
 */
jQuery.xhrPool.abortAll = function() {
    var requests = [];
    for (var index in this) {
        if (isFinite(index) === true) {
            requests.push(this[index]);
        }
    }
    for (index in requests) {
        requests[index].abort();
    }
};

/**
 * jQuery.xhrPool.remove
 * 
 * Loops over the requests, removes it once (and if) found, and then breaks out
 * of the loop (since nothing else to do).
 * 
 * @access public
 * @param  Object jqXHR
 * @return void
 */
jQuery.xhrPool.remove = function(jqXHR) {
    for (var index in this) {
        if (this[index] === jqXHR) {
            jQuery.xhrPool.splice(index, 1);
            break;
        }
    }
};

/**
 * Below events are attached to the document rather than defined the ajaxSetup
 * to prevent possibly being overridden elsewhere (presumably by accident).
 */
$(document).ajaxSend(function(event, jqXHR, options) {
    jQuery.xhrPool.push(jqXHR);
});
$(document).ajaxComplete(function(event, jqXHR, options) {
    jQuery.xhrPool.remove(jqXHR);
});

onassar
источник

2

Сделайте пул всех запросов ajax и прервите их .....

var xhrQueue = []; 

$(document).ajaxSend(function(event,jqxhr,settings){
    xhrQueue.push(jqxhr); //alert(settings.url);
});

$(document).ajaxComplete(function(event,jqxhr,settings){
    var i;   
    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    }
});

ajaxAbort = function (){  //alert("abortStart");
    var i=0;
    while(xhrQueue.length){ 
        xhrQueue[i++] .abort(); //alert(i+":"+xhrQueue[i++]);
    }
};

Zigri2612
источник

1

Лучше использовать независимый код .....

var xhrQueue = []; 

$(document).ajaxSend(function(event,jqxhr,settings){
    xhrQueue.push(jqxhr); //alert(settings.url);
});

$(document).ajaxComplete(function(event,jqxhr,settings){
    var i;   
    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    }
});

ajaxAbort = function (){  //alert("abortStart");
    var i=0;
    while(xhrQueue.length){ 
        xhrQueue[i++] .abort(); //alert(i+":"+xhrQueue[i++]);
    }
};

Zigri2612
источник

0

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

var ajReq = [];
var canAj = true;
function abort_all(){
 for(x in ajReq){
    ajReq[x].abort();
    ajReq.splice(x, 1)
 }
 canAj = false;
}
function rmvReq(ranNum){
 var temp = [];
 var i = 0;
 for(x in ajReq){
    if(x == ranNum){
     ajReq[x].abort();
     ajReq.splice(x, 1);
    }
    i++;
 }
}
function randReqIndx(){
 if(!canAj){ return 0; }
 return Math.random()*1000;
}
function getReqIndx(){
 var ranNum;
 if(ajReq.length){
    while(!ranNum){
     ranNum = randReqIndx();
     for(x in ajReq){
    if(x===ranNum){
     ranNum = null;
    }
     }
    }
    return ranMum;
 }
 return randReqIndx();
}
$(document).ready(function(){
 $("a").each(function(){
    if($(this).attr('href').indexOf('/logout')!=-1){          
     $(this).click(function(){
    abort_all();                 
     });
    }
 })
});
// Then in all of my scripts I wrapped my ajax calls... If anyone has a suggestion for a 
    // global way to do this, please post
var reqIndx = getReqIndx();
if(reqIndx!=0){
ajReq[reqIndx] = $.post(ajax, { 'action': 'update_quantities', iids:iidstr, qtys:qtystr },  
function(data){
 //..do stuff
 rmvReq(reqIndx);
 },'json');
}

Хорошие новости
источник

0

var Request = {
    List: [],
    AbortAll: function () {
        var _self = this;
        $.each(_self.List, (i, v) => {
            v.abort();
        });
    }
}
var settings = {
    "url": "http://localhost",
    success: function (resp) {
        console.log(resp)
    }
}

Request.List.push($.ajax(settings));

всякий раз, когда вы хотите прервать все запросы AJAX, вам просто нужно позвонить по этой линии

Request.AbortAll()

Омид Матури
источник

-2

Существует фиктивное решение, которое я использую для отмены всех запросов AJAX. Это решение перезагрузить всю страницу. Это решение хорошо, если вам не нравится присваивать ID каждому запросу ajax, и если вы делаете запросы ajax внутри цикла for. Это обеспечит уничтожение всех запросов AJAX.

location.reload();

ASammour
источник

-3

Вот как это можно сделать при любом нажатии (полезно, если на вашей странице выполняется много вызовов AJAX, и вы пытаетесь отойти от нее).

$ ->
    $.xhrPool = [];

$(document).ajaxSend (e, jqXHR, options) ->
    $.xhrPool.push(jqXHR)

$(document).ajaxComplete (e, jqXHR, options) ->
    $.xhrPool = $.grep($.xhrPool, (x) -> return x != jqXHR);

$(document).delegate 'a', 'click', ->
    while (request = $.xhrPool.pop())
      request.abort()

дБ.
источник

Остановите все активные запросы AJAX в JQuery

Ответы: