0

我制作了一个 jQuery 脚本，当用户滚动时从数据库中加载项目。唯一的问题是，当用户在页面加载后快速滚动时，脚本的结果会加倍，因此来自数据库的信息会显示两次。不太确定这里发生了什么，但脚本如下。顺便说一句，这一切都准备好了。

function last_item_funtion() 
     { 
     var ID=$(".newsItem:last").attr("id");
     $('#feedLoader').html('<img src="../files/images/bigLoader.gif" style="display:block;margin-left:auto;margin-right:auto;">');
     $.post("AJAX/scroll_feed.php?action=get&last_item_id="+ID,

     function(data){
     if (data != "") {
     $(".newsItem:last").after(data); 
     }
     $('#feedLoader').empty();
     });
     }; 

     $(window).scroll(function(){
     if ($(window).scrollTop() == $(document).height() - $(window).height()){
     last_item_funtion();
     }
     });

这不是我的jsfiddle，但它简而言之显示了脚本的作用。它没有显示我遇到的问题，但我无法复制它，因为我无法将整个数据库放在 jsfiddle 上。

更新 玩完游戏后，我意识到不是用户在页面加载后直接滚动，而是用户连续滚动而不是短滚动。由此我猜测jQuery不会注册数据已经加载，直到滚动停止。

4

2 回答 2

0

好吧，我猜这个scroll事件被触发了多次，所以请求被多次完成。尝试以下操作：

function bind_scroll() {
    $(window).bind('scroll', function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $(window).unbind('scroll');
            last_item_funtion();
        }
    });
}

function last_item_funtion() {
    var ID = $(".newsItem:last").attr("id");
    $('#feedLoader').html('<img src="../files/images/bigLoader.gif" style="display:block;margin-left:auto;margin-right:auto;">');
    $.post("AJAX/scroll_feed.php?action=get&last_item_id=" + ID,

    function (data) {
        if (data != "") {
            $(".newsItem:last").after(data);
        }
        $('#feedLoader').empty();
        bind_scroll();
    });
};

bind_scroll();

它绑定scroll事件，并在触发后解除绑定。请求完成后再次绑定事件。

（您也可以查看jQuery.one()，但我从未使用过它。）

编辑： 在做了一些测试之后，即使我们取消绑定，滚动事件也会被触发很多，所以这里有一个更新的例子，它使用一个全局变量来告诉scroll-callback 它是否已经加载了一些东西，或者是否可以做一个新的发帖请求：

window.scroll_loading = false;

function last_item_funtion() {
    var ID = $(".newsItem:last").attr("id");
    $('#feedLoader').html('<img src="../files/images/bigLoader.gif" style="display:block;margin-left:auto;margin-right:auto;">');

    $.post("AJAX/scroll_feed.php?action=get&last_item_id=" + ID,
        function (data) {
            window.scroll_loading = false;
            if (data != "") {
                $(".newsItem:last").after(data);
            }
            $('#feedLoader').empty();
        }
    );
};

$(window).bind('scroll', function () {
    if (window.scroll_loading == true) {
        return;
    }
    if ($(window).scrollTop() > $(document).height() - $(window).height() - 10) {
        window.scroll_loading = true;
        console.log("FIRE!");
        last_item_funtion();
    }
});
于 2012-09-01T01:12:06.177 回答
0

尚未对此进行测试，但看看这是否可以解决您的问题

$(window).die("scroll").live("scroll",function(){
     if ($(window).scrollTop() == $(document).height() - $(window).height()){
     last_item_funtion();
     }
     });
于 2012-08-31T23:32:25.070 回答