javascript - JQuery Prevent 函数 .click 每次点击时触发

Question

当我点击网站上的聊天时，我希望从服务器抓取消息，因此我使用 GET 请求，如下所示:

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

这就是 retrieveMessages 函数中的内容

$.get("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 之前将开始多个请求，这会导致显示相同消息的许多副本。

防止多次单击此按钮导致多个请求的惯用方法是什么？

Answer 1

通常在这种情况下，您只需禁用按钮，直到请求完成。为此，您需要提供一个回调函数。例如:

$("#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/