如何避免在Jquery Scroll Down上获得相同的数据

Question

我有下面的Jquery脚本，它在Scroll Down上上传mysql数据。问题是，有时它会请求相同的url，并三次获取相同的数据两次。如何避免获取相同的数据？

$(document).ready(function(){
    $(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
        var WindowHeight = $(window).height(); /* get the window height */
        if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
            $("#loader").html("<img src='loading_icon.gif' alt='loading'/>"); /* displa the loading content */
            var LastDiv = $("#tabsul>li:last"); /* get the last div of the dynamic content using ":last" */
            var LastId  = $("#tabsul>li:last").attr("id"); /* get the id of the last div */
            var offset = $("#tabsul>li").length; //thats the size we have
            var ValueToPass = "Id="+ LastId;
            $.ajax({ /* post the values using AJAX */
                type: "GET",
                url: "<?= url('pages/ajax/All/')?>"+offset+"/",
                data: ValueToPass,
                cache: false,
                success: function(html){
                    $("#loader").html("");
                    LastDiv.after(html);

                }
            });
        }
    });
});

Answer 1

我理解你的问题，这是一个常见的问题，因为AJAX是异步

有两种方法可以避免这个问题

1-将async参数设置为false

$(document).ready(function(){
    $(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
        var WindowHeight = $(window).height(); /* get the window height */
        if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
            $("#loader").html("<img src='loading_icon.gif' alt='loading'/>"); /* displa the loading content */
            var LastDiv = $("#tabsul>li:last"); /* get the last div of the dynamic content using ":last" */
            var LastId  = $("#tabsul>li:last").attr("id"); /* get the id of the last div */
            var offset = $("#tabsul>li").length; //thats the size we have
            var ValueToPass = "Id="+ LastId;
            $.ajax({ /* post the values using AJAX */
                type: "GET",
                url: "<?= url('pages/ajax/All/')?>"+offset+"/",
                data: ValueToPass,
                cache: false,
                async:false,
                success: function(html){
                    $("#loader").html("");
                    LastDiv.after(html);

                }
            });
        }
    });
});

2-使用布尔标志

var flag = true; 
$(document).ready(function(){
    $(window).scroll(function(){ /* window on scroll run the function using jquery and ajax */
        var WindowHeight = $(window).height(); /* get the window height */
        if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ /* check is that user scrolls down to the bottom of the page */
            $("#loader").html("<img src='loading_icon.gif' alt='loading'/>"); /* displa the loading content */
            var LastDiv = $("#tabsul>li:last"); /* get the last div of the dynamic content using ":last" */
            var LastId  = $("#tabsul>li:last").attr("id"); /* get the id of the last div */
            var offset = $("#tabsul>li").length; //thats the size we have
            var ValueToPass = "Id="+ LastId;
            if(flag == true)
            {
               flag = false; 
            $.ajax({ /* post the values using AJAX */
                type: "GET",
                url: "<?= url('pages/ajax/All/')?>"+offset+"/",
                data: ValueToPass,
                cache: false,
                success: function(html){
                    $("#loader").html("");
                    LastDiv.after(html);
                    flag = true; 
                }
            });
            }
        }
    });
});

在这个模型中，当上次请求完成时，您将变量设置为true

如果你想要，也许你需要改变if语句的条件

我希望这能帮助

Answer 2

在窗口滚动函数之前添加该范围之外的变量。

var urlsLoaded = [];
$(window).scroll(function(){

然后在以下两行之后，检查偏移量是否在该数组中，如果不在，则将其推入数组，然后执行ajax。

var offset = $("#tabsul>li").length; //thats the size we have
var ValueToPass = "Id="+ LastId;
if(urlsLoaded.indexOf(offset)) == -1){
    urlsLoaded.push(offset);
    $.ajax({ /* post the values using AJAX */
        type: "GET",
        url: "<?= url('pages/ajax/All/')?>"+offset+"/",
        data: ValueToPass,
        cache: false,
        success: function(html){
            $("#loader").html("");
            LastDiv.after(html);
        }
    });
}else{
    //I'm guessing do nothing? if so, just remove the else
    //otherwise perform your logic here
} 

如果区域中不存在值，JavaScript .indexOf()将返回-1，因此我们直接与之进行比较。

我建议正常缓存等，但如果这只是针对页面特定的逻辑，这样就不会显示重复的内容，那么这将有效。

编辑

更改$.inArray()以支持.indexOf()