ajax - jQuery:非常简单的自制无限滚动

Question

我知道有多个插件，但我想知道如何让我自己的东西按照我想要的方式工作。

首先，当滚动到页面底部时，我想触发一个名为 ajaxLoadActivity 的函数。现在通过“显示更多”按钮触发。

$(window).scroll(function() {

            if ( $(window).scrollTop() >= ( $(document).height() - $(window).height() ) )

                if ( $('ol.astream > .loadCount:last > li').attr('id') == "noMoreActivities" )
                    return false;

                ajaxLoadActivity('bottom', true);
                console.log('fired');

        });

我遇到的问题可能是每个人在尝试自己执行此操作时都会遇到的问题。问题是该函数被多次触发。函数ajaxLoadActivity执行所有 ajax 操作并附加 <li>项目到现有<ol> 。当仅与“显示更多”按钮一起使用时，该功能可以完美运行。

但是我想知道如何在简单地滚动到页面底部时触发相同的功能。但我只想调用它一次 - 然后等到内容加载 - 然后才允许在再次到达底部时再次触发该函数。

上面的示例代码中已经存在一个异常……如果我的最后一个元素的 ID 为 noMoreActivities我不想再次触发该函数，因为这样就没有更多的事件了。

有什么想法可以只触发该函数一次并等到请求发生吗？

Answer 1

假设您使用的是 $.post，您可以在 ajaxLoadActivity 函数中返回它，然后检查它是否正在运行

var ajax;

$(window).scroll(function() {

    if ( $(window).scrollTop() >= ( $(document).height() - $(window).height() ) )

        if ( $('ol.astream > .loadCount:last > li').attr('id') == "noMoreActivities" )
            return false;

        if (ajax) {

            return false; // don't make another request, let the current one complete, or
            // ajax.abort(); // stop the current request, let it run again
        }

        ajax = ajaxLoadActivity('bottom', true);
        console.log('fired');

});

function ajaxLoadActivity(one, two) {

    return $.post(/* stuff */);
}