0

我有以下 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);


                }
            });
        }
    });
});
4

2 回答 2

0

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

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()

于 2013-08-29T03:03:35.897 回答
0

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

我希望这可以帮助

于 2013-08-29T03:04:44.190 回答