處理Ajax請求

Question

在頁面中，我有多個圖像。我將顯示一個div容器進行預覽。在這裏，在加載圖像之前，我會向我的服務器發送請求以獲取圖像轉換細節。一旦成功，我將展示圖片預覽。當用戶點擊下一個/上一個圖標時，我將加載相應的圖像。但是，如果用戶連續單擊下一個/上一個圖標，Ajax請求將一遍又一遍地發送。這裏，如果Ajax請求中存在任何延遲。正確的圖像沒有在預覽中顯示。例如：如果用戶連續點擊，Ajax請求與5.jpg相關的數據。但是，在預覽中顯示4.jpg圖像。如何處理這個。

Answer 1

這樣做：

每次單擊一個按鈕時，存儲在一個變量的request。

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

現在，當用戶再次點擊該按鈕，在click處理，中止舊request。

request.abort(); 

喜歡的東西：

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

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