javascript - jQuery自动加载记录滚动时生成相同的记录集，如何解决？

Question

我添加了页面向下滚动时自动加载 jQuery 数据。它运行良好。但有时它会再次生成相同的记录集。这是使用的代码，我检查了问题，然后我有时会发现 track_load 变量不递增。

例如:页面首次加载时: track_load = 0向下滚动时: track_load 应 = 1，但有时 它给出0

请谁解释一下如何解决这个问题，谢谢......

<script type="text/javascript">
$(document).ready(function() {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = <?php echo $total_groups; ?>; //total record group(s)

    $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group

    $(window).scroll(function() { //detect page scroll

        if($(window).scrollTop() + $(window).height() > $(document).height()-200)  //user scrolled to bottom of the page?
        {

            if(track_load <= total_groups && loading==false) //there's more data to load
            {
                loading = true; //prevent further ajax loading
                $('.animation_image').show(); //show loading image

                //load data from the server using a HTTP POST request
                $.post('autoload_process.php',{'group_no': track_load}, function(data){

                    $("#results").append(data); //append received data into the element

                    //hide loading image
                    $('.animation_image').hide(); //hide loading image once data is received

                    track_load++; //loaded group increment
                    loading = false; 

                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                    alert(thrownError); //alert with HTTP error
                    $('.animation_image').hide(); //hide loading image
                    loading = false;

                });

            }
        }
    });
});
</script>

Answer 1

我的猜测是它的加载轨道 0 两次，您最初调用加载函数并作为增量回调传入，但是如果您在完成加载之前到达页面底部，您将加载相同的数据两次。

当您插入滚动条时，还可以尝试为您的负载执行类似的操作，即使它点击了很多次，它也会减慢客户端计算机的速度，您应该设置一个超时

编辑此内容应该适用于您的代码，并且不会导致客户端遇到太多事件

var scrollListener = function () {
    executeScrollIfinBounds();
    $(window).one("scroll", function () { //unbinds itself every time it fires
       executeScrollIfinBounds();
       setTimeout(scrollListener, 200); //rebinds itself after 200ms
    });
};

$(document).ready(function () {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = <?php echo $total_groups; ?>; //total record group(s)

   $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;
        //initialize scroll listener
        scrollListener();
    }); //load first group


});


function executeScrollIfinBounds()
{
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
     if(track_load <= total_groups && loading==false) //there's more data to load
        {
            loading = true; //prevent further ajax loading
            $('.animation_image').show(); //show loading image

            //load data from the server using a HTTP POST request
            $.post('autoload_process.php',{'group_no': track_load}, function(data){

                $("#results").append(data); //append received data into the element

                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received

                track_load++; //loaded group increment
                loading = false; 

            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                alert(thrownError); //alert with HTTP error
                $('.animation_image').hide(); //hide loading image
                loading = false;

            });
    }
}