Abbrechen AJAX-Request, wenn neue

Question

Hintergrund vorgelegt: Wenn Benutzer ein button seiner Klasse klickt zwischen class1 und class2 und diese Daten umgeschaltet wird, wird über AJAX vorgelegt. Um zu bestätigen, dass diese Daten gespeichert sind, antwortet der Server mit js (Aktualisierungsschaltfläche HTML).

Das Problem:, wenn ein Benutzer auf die Schaltfläche schneller als der Server trifft reagieren kann (dh trifft den Knopf schnell), wird die Taste hin- und herschalten, wenn die Server-Antworten kommen tatsächlich:

1. Benutzer trifft Taste, Änderungen an class2 über js (AJAX submitted)
2. den Benutzer auf, Änderungen an class1 über js (AJAX submitted)
3. Server antworten AJAX-Request zum ersten und erfrischen html class2
4. Server antworten auf zweiten AJAX-Request, und erfrischen html class1

Wie die Ajax-Anforderung abgebrochen werden kann, wenn ein neues Geschäft gemacht wird?

$('.button').click(function() { 
    $('this').toggleClass('class1 class2') 
    // submit ajax request 
    $.ajax({ 
     url: '/update_link' 
    }) 
}); 

Answer 1

EDITED

Ajax-Aufruf kann durch abbrechen Methode auf Ajax-Request-Objekt verwendet abgebrochen werden, aber auch Verwendung dieses Verfahren nicht als 100% ige Sicherheit geben, dass Server-Seite unsere Anfrage nicht bearbeitet. Mein Vorschlag ist also, die Benutzerschnittstelle zu blockieren und keine Ajax-Aufrufe abzubrechen.

über einige weitere Informationen abbrechen - How to cancel/abort jQuery AJAX request?

Beispiel BLOCK UI: aktuelle Ajax Zustand zu speichern, und legen Sie es auf true in Betteln

So viele Ajax-Aufrufe blockieren wir eine Variable benötigen (Ajax aktiviert) Wenn ajax aufgerufen wird, setze es auf false, wenn Ajax als Antwort zurückkehrt, setze es erneut auf "true". Und am wichtigsten überprüfen Sie diese Variable, wenn der Benutzer klickt, wenn die Variable falsch ist, dann kann kein anderer Ajax aufgerufen und die Ausführung gestoppt werden.

var canSendAjax=true;//our state variable 

$('.button').click(function() { 

    if (!canSendAjax) 
    return; //ajax is sending block execution 

    $('this').toggleClass('class1 class2') 
    // submit ajax request 

    //here ajax starts so set state to false 
    canSendAjax=false; 

    //extended to solution loading info 
    //save button current text label in variable 
    var label=$(this).text(); 
    //set loading on button for ui friendly 
    $(this).text("Loading..."); 

    $.ajax({ 
     url: '/update_link' 
    }).done(function() { 

     //here after ajax 
     canSendAjax=true; //we enable button click again 
     $(this).text(label);//set previous button label 

    }); 

}); 

BEISPIEL MIT VERWENDUNG VON ABORT:

var ajax=null; //our ajax call instance 

$('.button').click(function() { 


    if (ajax!=null){ 

     ajax.abort(); 

     ajax=ajax=$.ajax({ 
      url: '/update_link' 
     }); 
    } 


}); 

Answer 2

Warum Sie nicht einfach die Taste deaktivieren und die Klasse wechseln, sobald die Anforderung erledigt ist?

$('.button').click(function() { 
    $this = $(this); 
    $this.prop('disabled', true); 
    // submit ajax request 
    $.ajax({ 
     url: '/update_link', 
     success: function() { 
      $.toggleClass('class1 class2'); 
      $this.prop('disabled', false); 
     } 
    }) 
}); 

(klicken Ereignistriggerung nicht funktioniert, wenn der Eingang gesperrt ist)