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

在窗口滚动功能之前，在该范围之外添加变量。

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
}

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

我建议正常使用缓存等，但如果这只是针对特定于页面的逻辑，那么你就不会显示重复的内容，那么这个工作就可以了。

修改

更改$.inArray()，转而使用.indexOf()

Answer 2

据我了解你的问题，这是一个常见的问题，因为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语句的条件

我希望这可以提供帮助

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

2 个答案: