Question

想象一下喜欢或投票的页面按钮。我需要这个按钮来发送Ajax请求来记录用户的喜欢。

多次单击按钮的人很多次，会引起一些Ajax请求我该如何解决？当人们点击按钮（span）时，我需要阻止它再次发送Ajax请求，直到完成上一个Ajax请求

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<span onclick="send_ajax(this)">send_ajax</span>
<script type="text/javascript">

    function send_ajax(node){
        $.ajax({
            url:'ajax.php',
            type:'POST',
            data: {},
            success:function() {

            }
        });
    }
</script>

Answer 1

这个怎么样？

var processing = false; 
function send_ajax(node){
  if(!processing){
    processing = true;
    $.ajax({
        url:'ajax.php',
        type:'POST',
        data:{},
        success:function(){
              processing = false;
        }
    });
  }
}

Answer 2

首先你必须取消绑定点击：

<script type="text/javascript">
    jQuery('span').click(function(){
        $('span').unbind('click');  // unbind click
        //ajax request
    })
</script>

然后在complete方法的$.ajax事件中再次绑定它：

complete: function() {
    $('span').bind('click'); // will fire either on success or error
}

Answer 3

在点击调用的函数中，如果添加$(this).unbind('click');，则可以取消绑定click-eventhandler 您需要以这种方式更改您的功能：

function send_ajax(node){
  $(this).unbind('click');
  $.ajax({
    url:'ajax.php',
    type:'POST',
    data:{},
    success:function(){
    }
  });
}

如果您需要在成功后重新启用它，请再次在success-function中添加click-event。如果您以任何方式验证数据，请务必在.php文件中返回状态信息，以确保在验证失败时需要再次添加事件。

我建议使用$（this）而不是使用$（'span'），因为$（'span'）将返回多个对象，以防你在html标记中放置更多的跨度。

Answer 4

在您的处理程序中，只需删除事件侦听器即可忽略将来的点击。您可以设置超时以重新添加，或者作为成功回调的一部分。

Answer 5

(function ($) { 
    $.fn.oneClickPerTime = function (callback,timeDelay) {
        var __this = this;
        flagOneClick = 1;
        return this.each(function () {
            $(__this).click(function() {
                if (flagOneClick==0)
                    return;
                flagOneClick = 0;
                setTimeout(function() {
                    flagOneClick = 1;
                },timeDelay);
                callback(this);
            });
        });
    } 
})(jQuery);

$("#test_click").oneClickPerTime(function(){
    callback_after_click();
},500);

您可以在此处查看我的演示jsfiddle.net/pvN3u/

如何防止用户过快点击按钮，以防止额外的ajax请求？

5 个答案: