JQuery防止功能.click在每次點擊時觸發

Question

當我單擊站點上的聊天時，我希望從服務器中獲取消息，因此我使用$ .post請求，如下所示：

$("#friendsDiv").on("click", "#aFriend", function(event){
    retrieveMessages();
}

這就是retrieveMessages函數中的內容

$.post("PHP/chat.php",
    {
        action:'retrieveMessages',
        last_message: last_message,
        conversation_id:conversation_id
    },
    function(data){
        $("#messages").append(data);
        last_message = $("#messages").find(".aMessage:last").attr("id");
        $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 1000); 
    }
);  

問題是，如果快速單擊按鈕，則在更新last_message之前將開始多個發布請求，這將導致顯示相同消息的許多副本。 如果已經處理了另一個相同的請求，是否有辦法防止快速單擊按鈕或停止處理該發布請求？

編輯#aFreind元素是DIV而不是按鈕

Answer 1

最好的選擇是禁用按鈕，然后在$.post之后啟用它

$("#friendsDiv").on("click", "#aFriend", function(event) {
    $(this).prop('disabled', true);  // disable
    retrieveMessages();
});

和retrieveMessage函數

$.post("PHP/chat.php", {
    action: 'retrieveMessages',
    last_message: last_message,
    conversation_id: conversation_id
}, function(data) {
    $("#messages").append(data);
    last_message = $("#messages").find(".aMessage:last").attr("id");
    $("#messages").animate({
        scrollTop: $("#messages")[0].scrollHeight
    }, 1000);
    $(this).prop('disabled', false); // enable it again
});

Answer 2

通常，在這種情況下，您只需禁用按鈕，直到請求完成。 為此，您將需要提供一個回調函數。 例如：

$("#friendsDiv").on("click", "#aFriend", function (event) {

    // reference the button
    var button = this;

    // disable the button
    this.disabled = true;

    // provide a callback to be invoked when post is done
    retrieveMessages(function() {
        button.disabled = false;
    });
});

function retrieveMessages(callback) {
    $.post("PHP/chat.php", {
        action: 'retrieveMessages',
        last_message: last_message,
        conversation_id: conversation_id
    }, function (data) {
        $("#messages").append(data);
        last_message = $("#messages").find(".aMessage:last").attr("id");
        $("#messages").animate({
            scrollTop: $("#messages")[0].scrollHeight
        }, 1000);

        // execute callback which enables button again
        callback();
    });
}

演示： http ： //jsfiddle.net/9t8fLdjn/

Answer 3

您可以使用一個 jQuery函數並在回調中再次綁定按鈕，而不是使用on 。 Se http://api.jquery.com/one/

$("#friendsDiv").one("click", "#aFriend", retrieveMessages });
var retrieveMessages = function(){
   $.post("PHP/chat.php", { 
      ... 
   }).done(function(){
     $("#friendsDiv").one("click", "#aFriend", retrieveMessages });
   });
};