鏈接被阻止時禁用多個Ajax請求

Question

我正在嘗試實施一種避免垃圾郵件的方法。我有一個鏈接按鈕，單擊時使用Jquery $ .ajax（）命令將請求發送到服務器。我想要一種方法來禁止多次點擊，比如在添加評論時在StackOverflow中實現的點擊。

有什麼建議嗎？

Answer 1

您可以阻止用戶界面，而Ajax請求完成。給看看到blockUI plugin此

Answer 2

你可以做這樣的事情......

$("#buttonId").click(function(){ 
    $(this).attr("disabled", true); 
    $.ajax({}); // Your ajax call. 
}); 

Answer 3

這真的取決於元素的類型，但對於超鏈接，你可能需要解除綁定click事件，並重新綁定當AJAX請求完成：

function ajaxThingie() { 
    $(this).unbind("click"); 

    // do something ajaxy, and in the success callback rebind: 
    $.get("foo.html", function() { 
     $(this).bind("click", ajaxThingie); 
    }); 
    return false; 
} 


$(document).ready(function() { 
    $("#theLink").click(ajaxThingie); 
}); 

Answer 4

的jQuery有專爲此目的設計的.one() method。的（未經測試）例如：

function doAjax(){ 
    // Your Ajax call. 
    $.ajax({..., success: function() { 
     // Ajax call done, re-enabling the button/link 
     $("#buttonId").one('click', doAjax); 
    }, ...}); 
} 

$("#buttonId").one('click', doAjax); 

Answer 5

爲我工作（上鍊接）另一種選擇是設置點擊（禁用）一個ATTR，然後Ajax調用完成後刪除。

唯一額外的步驟，因爲點擊事件仍然會在鏈接上被調用，是檢查，看看attr存在之前觸發ajax調用。

if ($form.attr("disabled")!=="disabled") { 
$.ajax({ 

    success: function(data){  
      $form.removeAttr("disabled"); 

    }, 
    dataType: "json" 
}); 

} 
$form.attr("disabled", "disabled"); 

Answer 6

我曾嘗試另一種選擇 項目被點擊就在

beforeSend:function(){ 
    $(placeholder).addClass('loading'); 
}, 

其中佔位符通常是在DOM最高級別的元素，我們能買得起通常#cotent或$頁面或類似的東西

爲.loading的CSS是如下

.loading { 
    background: #fff url('../images/ajax-loader.gif') center 10px; 
    opacity: 1; 
} 
loading * { 
    opacity: .8; 
} 

我希望使用同樣的東西，我們可以點擊頂級元素

beforeSend:function(){ 
    $(placeholder).addClass('loading'); 
    $(placeholder).click(function(){preventDefault();}); 
}, 
complete:function(){ 
    $(placeholder).removeClass('loading'); 
    $(placeholder).click(function(){// now do the default action}); 
}, 

希望能解決問題

Answer 7

使用標誌變量，並設置爲defult「0」，點擊後，設置其值爲「1」

Answer 8

我寫了一個類做這樣的事情在snapwebsites。我的問題是我想要將很多更改報告給服務器，但是避免同時運行兩個AJAX請求。

所以，主要的問題是要知道是否仍然有請求，如果是的話，以防止進一步的請求。但是，額外的請求可能會攜帶仍需要發送到服務器的其他數據，只有在發送該附加數據之前，我們纔會等待當前請求返回。

不僅如此，我希望在請求之間有一定的秒數。到目前爲止，最後的要求，我還包括一個帶有計時器的版本。但是，這可能會導致數據丟失，因爲最新數據位於客戶端計算機上，可能無法發送。我想我會實施必要的使用cookie的最後一種情況。

該代碼是1200行，所以我只會給你一個鏈接到GIT on SourceForge.net。這個概念很簡單。正如其他人提到的那樣，你想有一個標誌來知道請求是否還在。當調用complete()回調函數時，該標誌被重置。

的「類」（JavaScript類使用原型，但我喜歡把它們記錄與ActionScript類）看起來是這樣的：

class ServerAccess 
{ 
public: 
    function ServerAccess(callback: ServerAccessCallbacks); 
    function setURI(uri: string, opt_queryString: Object) : Void; 
    function setData(data: Object) : Void; 
    function send() : Void; 
    static function appendQueryString(uri: string, query_string: Object): string; 

private: 
    var callback_: ServerAccessCallbacks = null; 
    var uri_: string = ""; 
    var queryString_: Object = null; 
    var data_: Object = null; 
}; 

class ServerAccessTimer extends ServerAccessCallbacks 
{ 
public: 
    function ServerAccessTimer(request_name: String, timer_callback: ServerAccessTimerCallbacks, interval: Number); 

    function send(); 

    virtual function serverAccessSuccess(result : ResultData) : Void; 
    virtual function serverAccessError(result : ResultData) : Void; 
    virtual function serverAccessComplete(result : ResultData) : Void; 

private: 
    var requestName_: String; 
    var timerCallback_: ServerAccessTimerCallbacks; 
    var interval_: Number; 
    var processing_: Boolean; 
    var timer_: Number; 
    var lastRequest_: Number; 
}; 

我在e-Commerce JavaScript使用的例子。預計數據將由回調生成（請參閱ServerAccessTimerCallbacks參考）。因此，你可以呼叫發送（）1000每秒，而沒有從中得到每requestInterval_最多一個請求（即可以在每10秒一次。）

snapwebsites.eCommerceCart.prototype.sendCart_ = function() 
{ 
    if(this.initializing_) 
    { 
    return; 
    } 
    if(!this.serverAccessTimer_) 
    { 
    this.serverAccessTimer_ = new snapwebsites.ServerAccessTimer("cart", this, this.requestsInterval_); 
    } 
    this.serverAccessTimer_.send(); 
};