Question

我有一个显示某些新闻的网页，以及一个点击按钮的按钮，显示对服务器进行AJAX调用的旧消息。

问题在于，如果人们点击太快，请求会完成两次，因此，我会收到2次相同的回复。

＃mas-noticias-footer是显示较旧新闻的按钮的ID
.noticias-list是使用.length分配给每个new的类显示的新闻数量，以及将该数字POST到PHP文件中使用LIMIT（numItems，3）进行SQL查询（我一次得到3个新闻）。
#noticias-display是包含新闻的ul

这是代码

$(document).ready(function() {
  $("#mas-noticias-footer").on('click',function() {
var numItems = $('.noticias-list').length;
$.ajax({
        type: "POST",
        url: "mas-noticias.php",
    data: "num-noticias="+numItems,
    success: function(data) {
            $('#noticias-display').append(data);
            }
}); 
  });
});

我已经尝试在on回调的开头使用off（）并取消绑定事件，以避免多次调用（可行），问题是我在回调结束时使用on（）委托事件，我无法使它发挥作用。

Answer 1

您无法方便地调用off，稍后调用on期望返回绑定事件，事件不会存储在内存中。

但是，您可以在DOM中设置数据变量：

  $("#mas-noticias-footer").on('click',function() {
     var numItems = $('.noticias-list').length;
     var isAjaxRunning = $(this).data('iar');

     // check flag is set
     if(typeof isAjaxRunning == 'undefined') $(this).data('iar', 'yes'); 
     else if(isAjaxRunning == 'yes') return; // if still running, return

     $.ajax({
        type: "POST",
        url: "mas-noticias.php",
        data: "num-noticias="+numItems,
        success: function(data) {
            $('#noticias-display').append(data);
            $(this).data('iar', 'no'); // after successful run, set to no
        }
     }); 
  });

Answer 2

我不相信你真的想在这里进行异步调用。设置async:false或使用$.post()代替$.ajax()。

Answer 3

$(document).ready(function() {
    $("#mas-noticias-footer").on('click', getnews);

    function getnews() {
        $("#mas-noticias-footer").off('click', getnews);
        var numItems = $('.noticias-list').length;
        $.ajax({
            type: "POST",
            url: "mas-noticias.php",
            data: "num-noticias="+numItems,
            success: function(data) {
                $('#noticias-display').append(data);
            },
            complete: function() {
                $("#mas-noticias-footer").on('click', getnews);
            }
        });
    }
});

如果在委托中使用on（），请确保以相同的方式使用off（）。

Answer 4

您是否尝试过按钮？

$(document).ready(function() {
    $("#mas-noticias-footer").on('click',function() {
        var self=this;
        $(self).attr('disabled','disabled'); //<-Disable
        var numItems = $('.noticias-list').length;
        $.ajax({
            type: "POST",
            url: "mas-noticias.php",
            data: "num-noticias="+numItems,
            success: function(data) {
               $('#noticias-display').append(data);
               $(self).removeAttr('disabled');//<-Enable
            }
        }); 
    });

Answer 5

我知道这已经得到了解答，但我已经使用$.unbind制作了一个解决方案，并且稍微分离了代码

Demo

禁用/启用jQuery单击事件以避免多个POST请求

5 个答案: