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之前非常快速地点击按钮，将会开始多个帖子请求，这会导致显示相同消息的许多副本。有没有办法阻止快速点击按钮，或者如果已经处理了另一个相同的请求，则停止正在处理的帖子请求？

EDIT #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 });
   });
};

JQuery防止功能。点击每次点击即可点击

3 个答案:

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