javascript - 到达容器底部时 AJAX 加载

Question

我无法解决这个问题。

当我到达页面底部时，我使用这个 JS 调用来加载 ajax 内容:

$(window).scroll(function() {
if($(window).scrollTop() + window.innerHeight == $(document).height()  ) {

它工作得很好，但现在我想更改为当我到达容器底部时加载内容......我正在尝试这个:

$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#postswrapper').offset().top +     $('#postswrapper').outerHeight() - window.innerHeight) {

当我到达容器底部时，它会加载内容，但它加载了大约 5 次...就像每次循环 5 次一样。

我希望它加载一次，然后当我返回页面并到达容器的“新底部”时，再加载数据1次......等等

我尝试了很多变量，但我无法弄清楚。有什么建议吗？

完整的 AJAX 代码

$(window).bind('scroll', function() {
   if($(window).scrollTop() >= $('#postswrapper').offset().top + $('#postswrapper').outerHeight() - window.innerHeight) {



        $('div#loadmoreajaxloader').show();
        $.ajax
        ({
            url: "loadmore.php",
            method: "get",
            data: { page: pageNumber, perpage: perPage, search: "<?=$search?>", blogtag: "<?=$blogtag?>"},
            success: function(html)
                    {
                        if(html)
                        {
                            $("#postswrapper").append(html);
                            $('div#loadmoreajaxloader').hide();

                            pageNumber++;

                        }
                        else
                        {
                            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                        }

                    }

        }); // close AJAX

        }  // close if()
}); // close $(window)

Answer 1

在条件设置为 true 后，滚动顶部会执行几次:

if($(window).scrollTop() >= $('#postswrapper').offset().top + $('#postswrapper').outerHeight() - window.innerHeight) 

这是一个窗口滚动的测试 fiddle ，当您移动滚动时它总是会触发，并且您的条件不限制内部范围仅执行一次。

test scrool event

编辑:最简单的方法是在执行 ajax 请求以及使用新内容更新 UI 时使用锁。