javascript - 到达容器底部时的AJAX负载

我无法弄清楚这个问题。

当我到达页面底部时，我使用此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次循环一样。

我希望它一次加载一次，然后当我返回上一页时，我到达容器的“ NEW BOTTOM”，再加载一次数据……等等

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

完整的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)

最佳答案

将条件设置为true后，将执行几次滚动顶部：

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

这是一个用于窗口滚动的测试小提琴，它在您移动滚动时始终会触发，并且您的条件不会将内部范围限制为仅执行一次。

test scrool event

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

关于javascript - 到达容器底部时的AJAX负载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34186905/