Przerywanie żądań Ajax przy użyciu jQuery

Nie możesz przywołać żądania, ale możesz ustawić wartość timeout, po której odpowiedź będzie ignorowana. Zobacz tę stronę {[2] } dla opcji jQuery AJAX. Wierzę, że błąd wywołania zwrotnego zostanie wywołany, jeśli czas oczekiwania zostanie przekroczony. Istnieje już domyślny limit czasu dla każdego żądania AJAX.

Możesz również użyć metody abort() na obiekcie request, ale chociaż spowoduje to, że klient przestanie nasłuchiwać zdarzenia, to może prawdopodobnie nie zatrzyma Serwer od przetwarzania go.

Jest to asynchroniczne żądanie, co oznacza, że po wysłaniu jest tam.

W przypadku, gdy serwer rozpoczyna bardzo kosztowną operację ze względu na żądanie AJAX, najlepsze, co możesz zrobić, to otworzyć serwer, aby nasłuchać żądań anulowania i wysłać oddzielne żądanie AJAX powiadamiając serwer, aby przestał cokolwiek robi.

W przeciwnym razie po prostu zignoruj odpowiedź AJAX.

Zapisz wykonane połączenia w tablicy, a następnie wywołaj xhr.abort () na każdym.

Ogromne zastrzeżenie: możesz anulować żądanie, ale to tylko strona klienta. Strona serwera może nadal przetwarzać żądanie. Jeśli używasz czegoś takiego jak PHP lub ASP z danymi sesji, dane sesji są blokowane do czasu zakończenia ajax. Aby umożliwić użytkownikowi dalsze przeglądanie strony, należy wywołać session_write_close (). To zapisuje sesję i odblokowuje ją tak, że inne strony czekanie na kontynuację będzie kontynuowane. Bez tego kilka stron może czekać na usunięcie blokady.

Żądania AJAX mogą nie być wypełnione w kolejności, w jakiej zostały uruchomione. Zamiast przerywać, możesz wybrać ignorować wszystkie odpowiedzi AJAX z wyjątkiem ostatniej:

• Utwórz licznik
• zwiększ licznik po zainicjowaniu żądania AJAX
• Użyj bieżącej wartości licznika do "stempla" żądania
• w wywołaniu zwrotnym sukcesu porównaj znaczek z licznikiem, aby sprawdzić, czy było to ostatnie żądanie

Szorstki zarys kod:

var xhrCount = 0;
function sendXHR() {
    // sequence number for the current invocation of function
    var seqNumber = ++xhrCount;
    $.post("/echo/json/", { delay: Math.floor(Math.random() * 5) }, function() {
        // this works because of the way closures work
        if (seqNumber === xhrCount) {
            console.log("Process the response");
        } else {
            console.log("Ignore the response");
        }
    });
}
sendXHR();
sendXHR();
sendXHR();
// AJAX requests complete in any order but only the last 
// one will trigger "Process the response" message

Demo na jsFiddle

Po prostu musieliśmy obejść ten problem i przetestować trzy różne podejścia.

1. anuluje żądanie zgodnie z sugestią @meouw
2. wykonuje wszystkie żądania, ale przetwarza tylko wynik ostatniego zgłoszenia
3. zapobiega nowym żądaniom tak długo, jak kolejne wciąż oczekują

var Ajax1 = {
  call: function() {
    if (typeof this.xhr !== 'undefined')
      this.xhr.abort();
    this.xhr = $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        //process response
      }
    });
  }
};
var Ajax2 = {
  counter: 0,
  call: function() {
    var self = this,
      seq = ++this.counter;
    $.ajax({
      url: 'your/long/running/request/path',
      type: 'GET',
      success: function(data) {
        if (seq === self.counter) {
          //process response
        }
      }
    });
  }
};
var Ajax3 = {
  active: false,
  call: function() {
    if (this.active === false) {
      this.active = true;
      var self = this;
      $.ajax({
        url: 'your/long/running/request/path',
        type: 'GET',
        success: function(data) {
          //process response
        },
        complete: function() {
          self.active = false;
        }
      });
    }
  }
};
$(function() {
  $('#button').click(function(e) {
    Ajax3.call();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button" value="click" />

W naszym przypadku zdecydowaliśmy się użyć podejścia #3, ponieważ generuje ono mniejsze obciążenie serwera. Ale nie jestem w 100% pewien, czy jQuery gwarantuje wywołanie .complete () - metoda, która może wywołać impas. W naszych testach nie mogliśmy odtworzyć takiej sytuacji.

Zawsze najlepiej jest robić coś takiego.

var $request;
if ($request != null){ 
    $request.abort();
    $request = null;
}

$request = $.ajax({
    type : "POST", //TODO: Must be changed to POST
    url : "yourfile.php",
    data : "data"
    }).done(function(msg) {
        alert(msg);
    });

Ale jest znacznie lepiej, jeśli sprawdzisz instrukcję if, aby sprawdzić, czy żądanie ajax jest null, czy nie.

Zadzwoń do xhr.abort () czy jest to obiekt jQuery ajax czy natywny obiekt XMLHTTPRequest.

Przykład:

//jQuery ajax
$(document).ready(function(){
    var xhr = $.get('/server');
    setTimeout(function(){xhr.abort();}, 2000);
});

//native XMLHTTPRequest
var xhr = new XMLHttpRequest();
xhr.open('GET','/server',true);
xhr.send();
setTimeout(function(){xhr.abort();}, 2000);

Robiłem rozwiązanie Wyszukiwania na żywo i musiałem anulować oczekujące żądania, które mogły trwać dłużej niż ostatnie/najbardziej aktualne żądanie.

W moim przypadku użyłem czegoś takiego:

//On document ready
var ajax_inprocess = false;

$(document).ajaxStart(function() {
ajax_inprocess = true;
});

$(document).ajaxStop(function() {
ajax_inprocess = false;
});

//Snippet from live search function
if (ajax_inprocess == true)
{
    request.abort();
}
//Call for new request 

Jak zauważyło wiele osób w wątku, tylko dlatego, że żądanie jest przerwane po stronie klienta, serwer nadal będzie je przetwarzał. Powoduje to niepotrzebne obciążenie serwera, ponieważ wykonuje on pracę, której nie słuchamy w interfejsie.

Problem, który próbowałem rozwiązać (że inni mogą uruchomić również) jest to, że gdy użytkownik wprowadził informacje w polu wprowadzania, chciałem odpalić prośbę o Google Instant typu czuć.

Aby uniknąć strzelania niepotrzebnych próśb i aby utrzymać snappiness front-endu, zrobiłem co następuje:

var xhrQueue = [];
var xhrCount = 0;

$('#search_q').keyup(function(){

    xhrQueue.push(xhrCount);

    setTimeout(function(){

        xhrCount = ++xhrCount;

        if (xhrCount === xhrQueue.length) {
            // Fire Your XHR //
        }

    }, 150);

});

To zasadniczo wysyła jedno żądanie co 150ms (zmienna, którą można dostosować do własnych potrzeb). Jeśli masz problemy ze zrozumieniem, co dokładnie się tutaj dzieje, Zaloguj się xhrCount i xhrQueue do konsoli tuż przed blokadą if.

Możesz przerwać każde ciągłe wywołanie ajax używając tego

<input id="searchbox" name="searchbox" type="text" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
     var request = null;
        $('#searchbox').keyup(function () {
            var id = $(this).val();
            request = $.ajax({
                type: "POST", //TODO: Must be changed to POST
                url: "index.php",
                data: {'id':id},
                success: function () {
    
                },
                beforeSend: function () {
                    if (request !== null) {
                        request.abort();
                    }
                }
            });
        });
</script>

Po prostu użyj ajax.abort () na przykład możesz anulować każde oczekujące żądanie ajax przed wysłaniem kolejnego, takiego jak to

//check for existing ajax request
if(ajax){ 
 ajax.abort();
 }
//then you make another ajax request
$.ajax(
 //your code here
  );

Nie ma wiarygodnego sposobu, aby to zrobić, I nawet bym nie próbował, gdy żądanie jest w ruchu; tylko sposób rozsądnej reakcji jest zignorować odpowiedź.

W większości przypadków może się to zdarzyć w sytuacjach takich jak: użytkownik klika zbyt często na przycisk wyzwalający wiele kolejnych XHR, tutaj masz wiele opcji, albo zablokować przycisk aż XHR zostanie zwrócony, lub nawet nie wyzwalać nowego XHR, gdy inny jest uruchomiony, sugerując użytkownikowi pochylenie się do tyłu - lub odrzucić wszelkie oczekujące XHR odpowiedź, ale najnowsze.

Poniższy kod pokazuje inicjowanie i przerywanie żądania Ajax:

function libAjax(){
  var req;
  function start(){

  req =    $.ajax({
              url: '1.php',
              success: function(data){
                console.log(data)
              }
            });

  }

  function stop(){
    req.abort();
  }

  return {start:start,stop:stop}
}

var obj = libAjax();

 $(".go").click(function(){


  obj.start();


 })



 $(".stop").click(function(){

  obj.stop();


 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="go" value="GO!" >
   <input type="button" class="stop" value="STOP!" >

Miałem problem z polling i gdy strona została zamknięta ankieta kontynuowana tak w mojej przyczyny użytkownik przegapi aktualizację jako wartość mysql został ustawiony na następne 50 sekund po zamknięciu strony, nawet jeśli zabiłem żądanie ajax, pomyślałem sobie, używając $_SESSION, aby ustawić var nie zaktualizuje się w ankiecie jej samego, aż jej zakończył i Nowy rozpoczął, więc co zrobiłem było ustawione wartość w mojej bazie danych jako 0 = offpage, podczas gdy jestem polling i zapytanie, że wiersz i zwracam false; gdy jest 0 jak querying w ankietach będzie Ci bieżące wartości oczywiście...

Mam nadzieję, że to pomogło

Jeśli xhr.abort(); spowoduje przeładowanie strony,

Następnie możesz ustawić onreadystatechange przed przerwaniem, aby zapobiec:

// ↓ prevent page reload by abort()
xhr.onreadystatechange = null;
// ↓ may cause page reload
xhr.abort();

Udostępniłem demo , które pokazuje, jak anulować żądanie AJAX-jeśli dane nie są zwracane z serwera w określonym czasie oczekiwania.

HTML:

<div id="info"></div>

KOD JS:

var isDataReceived= false, waitTime= 1000; 
$(function() {
    // Ajax request sent.
     var xhr= $.ajax({
      url: 'http://api.joind.in/v2.1/talks/10889',
      data: {
         format: 'json'
      },     
      dataType: 'jsonp',
      success: function(data) {      
        isDataReceived= true;
        $('#info').text(data.talks[0].talk_title);        
      },
      type: 'GET'
   });
   // Cancel ajax request if data is not loaded within 1sec.
   setTimeout(function(){
     if(!isDataReceived)
     xhr.abort();     
   },waitTime);   
});