Question

我遇到了一个似乎无法解决的问题。

我目前正在实现一个类似于Twitter使用的AJAX功能 - 在滚动时获取新帖子。

jQuery看起来像这样：

        $(window).scroll(function(){
            if($(window).scrollTop() == $(document).height() - $(window).height()){
                $('div#ajaxloader').show();
                $.ajax({
                    url: "loader.php?lastid=" + $(".container:last").attr("id"),
                    success: function(html){
                        if(html){
                            $("#main").append(html);
                            $('div#ajaxloader').hide();
                        }else{
                            $('div#ajaxloader').html('No more posts to show.');
                        }
                    }                   
                });
            }
        });

现在问题;如果用户滚动得非常快并且数据库正在快速完成工作 - jQuery似乎无法足够快地发送正确的id作为查询 - 这导致双帖。

任何人都知道如何防止这种情况？

Answer 1

试试这个：

  var runningRequest = 0;
  $(window).scroll(function(){
        if(runningRequest <1){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            runningRequest++;
            $('div#ajaxloader').show();
            $.ajax({
                url: "loader.php?lastid=" + $(".container:last").attr("id"),
                success: function(html){
                    runningRequest--;
                    if(html){
                        $("#main").append(html);
                        $('div#ajaxloader').hide();
                    }else{
                        $('div#ajaxloader').html('No more posts to show.');
                    }
                }
                error: function(){runningRequest--;}                   
            });
        }
        }
    });

Answer 2

在发出请求之前，我会将布尔值设置为true，每当请求完成时，我都会将其设置为false。然后，我将检查发出请求的代码，以检查该值是true还是false。我还要添加一个bool，告诉我是否应该费心去做一个请求 - 请求最后一个请求是否为空状态是没有意义的（除非，自上次请求以来数据集可能会发生变化）。无论哪种方式，这是我开始的代码：

( function( global )
{
    var $ = global.jQuery,
        $win = $( global ),
        $doc = $( global.document ),
        $ajaxLoader = $( 'div#ajaxloader' ),
        $main = $( '#main' ),
        requestInProgress = false,
        outOfPosts = false;

    $win.scroll( function()
    {
        if( ! requestInProgress &&
            ! outOfPosts &&
            $win.scrollTop() === $doc.height() - $win.height()
          )
        {
            requestInProgress = true;

            $ajaxLoader.show();

            $.ajax( {
                url: 'loader.php',
                data: {
                    lastid: $( '.container:last' ).attr( 'id' )
                },
                success: function( html )
                {
                    if( html )
                    {
                        $main.append( html );
                        $ajaxLoader.hide();
                    }
                    else
                    {
                        outOfPosts = true;
                        $ajaxLoader.html( 'No more posts to show.' );
                    }
                },
                complete: function()
                {
                    requestInProgress = false;
                }
            } );
        }
    } );
}( window ) );

防止堆叠AJAX请求

2 个答案: