取消AJAX請求如果提交

背景新的：當用戶點擊一個button其類class1和class2之間切換，並將該數據經由AJAX提交。要確認此數據已保存，服務器將以js（更新按鈕HTML）響應。取消AJAX請求如果提交

問題：如果用戶點擊該按鈕比服務器快能（即快速點擊的按鈕）作出迴應，該按鈕就會來回切換，一旦服務器響應實際到帳：

用戶點擊按鈕，通過JS改變class2（AJAX提交）
用戶點擊按鈕，通過JS改變class1（AJAX提交）
服務器響應第一個AJAX請求，並刷新HTML到class2
服務器響應第二AJAX請求，並刷新HTML到class1

怎麼能Ajax請求被取消，如果一個新的製造？

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

來源

2016-08-21 Jeremy Lynch

豈不是一個更好的主意，把一個功能上，它使非活動狀態幾秒鐘後，點擊該按鈕？ – Sander

只需禁用切換，直到異步函數返回響應或超時並返回錯誤。 – Redu

http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery – epascarello

EDITED

Ajax調用可以通過被中止中止使用的Ajax請求對象方法，但即使使用這種方法不能給出100％的把握是服務器端不處理我們的請求。所以我的主張是阻止用戶界面，而不是放棄阿賈克斯調用。

一些更多的信息，有關中止 - How to cancel/abort jQuery AJAX request?

示例框UI：

因此，要阻止我們需要一些變量來保存當前的ajax狀態許多Ajax調用，並將其設置爲true乞討（啓用ajax），當ajax被調用時將它設置爲false，當ajax返回響應時，將它重新設置爲true。最重要的是當用戶點擊時檢查這個變量，如果變量爲false，則不能調用其他ajax並停止執行。

隨着使用中止的例子：

var ajax=null; //our ajax call instance 

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


    if (ajax!=null){ 

     ajax.abort(); 

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


});

來源

2016-08-21 14:02:33

這是一個解決方案，唯一的問題是，用戶不會看到任何改變，當他們繼續按下按鈕。如果服務器需要5秒鐘響應，這將是令人沮喪的 –

在按鈕中添加一些負載，例如將其標籤更改爲 - 正在加載... –

此處的目的是爲用戶即時更改，而不會延遲。 –

你爲什麼不乾脆禁用按鈕，切換班級一旦請求被做了什麼？

$('.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); 
     } 
    }) 
});

（點擊事件觸發如果輸入無效不工作）

來源

2016-08-21 14:43:56 Hulothe

取消AJAX請求如果提交

回答

相關問題