Handle Ajax Anfrage

Question

In einer Seite habe ich mehrere Bilder. Ich werde einen div-Container zur Vorschau anzeigen. Hier werde ich vor dem Laden des Bildes eine Anfrage an meinen Server senden, um Bildkonvertierungsdetails zu erhalten. Sobald es erfolgreich ist, zeige ich die Bildvorschau. Wenn der Benutzer auf das nächste/vorherige Symbol klickt, werde ich das entsprechende Bild laden. Wenn der Benutzer jedoch fortlaufend auf die nächsten/vorherigen Symbole klickt, werden Ajax-Anfragen immer wieder gesendet. Hier, wenn irgendeine Verzögerung in Ajax-Anfrage ist. Das richtige Bild wird in der Vorschau nicht angezeigt. Zum Beispiel: Wenn der Benutzer kontinuierlich klickt, fragt Ajax Daten ab, die sich auf 5.jpg beziehen. Aber in der Vorschau zeigt es 4.jpg Bild. Wie man damit umgeht.

Answer 1

tun:

Jedes Mal, wenn eine Schaltfläche geklickt wird, speichern Sie die request in einer Variablen. Jetzt

var request = $.ajax({ 
    url: 'your url', 
    success: function(data){ 
    } 
}); 

, wenn der Benutzer wieder auf die Schaltfläche klickt, in dem click Handler, Abbruch der alten request.

request.abort(); 

Etwas wie:

var request = null; 
$('.button').click(function(){ 
    if(request){ 
     request.abort(); 
    } 

    request = $.ajax({ 
     url: 'your url', 
     data: 'which image to load', 
     success: function(data){ 
     } 
    }); 
});