0

I have a webpage that shows some news, and a button that when is clicked shows older news doing an AJAX call to the server.

The problem is that if people click too fast, the request is done twice, therefore, I receive 2 equal responses.

  • #mas-noticias-footer is the id of the button that displays older news

  • .noticias-list is the class asigned to each new, using .length I get the number of news displayed, and POST that number to a PHP file that does a SQL query using LIMIT(numItems,3) (I get 3 news at a time).

  • #noticias-display is the ul that contains the news

This is the code

$(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);
            }
}); 
  });
});

I have tried using off() and unbinding the event at the beginning of the on callback, to avoid the multiple calls (that works), the problem is when I delegate the event using on() at the end of the callback, I can't make it work.

4

5 回答 5

3

您不能方便地调用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
        }
     }); 
  });
于 2012-04-12T01:49:59.133 回答
1

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

于 2012-04-12T01:55:09.133 回答
0 
$(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()。

于 2012-04-12T01:49:46.153 回答
0

您是否尝试禁用该按钮？

$(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
            }
        }); 
    });
于 2012-04-12T01:59:44.563 回答
0

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

演示

于 2012-04-12T02:15:50.770 回答