Ajax jQuery：非常简单的自制无限卷轴

我知道有多个插件在那里，但我想知道如何才能使我自己的东西的工作方式，我想要的

首先，当滚动到页面底部时，我想触发一个名为

ajaxLoadActivity

的函数，该函数现在通过“显示更多”按钮触发

我有一个问题，可能每个人都会遇到，当试图自己做这件事。问题是函数被多次激发。函数

ajaxLoadActivity

执行所有ajax内容，并将

项附加到现有的

中。只需使用“显示更多”按钮，该功能即可完美运行

然而，我想知道当我只是滚动到页面底部时，如何触发相同的功能。但我只想调用它一次——然后等待加载内容——只有在再次到达底部时才允许再次启动函数

我在上面的示例代码中已经有一个异常……如果我的最后一个元素的id为

noMoreActivities

，我不希望再次启动该函数，因为这样就没有更多的活动了

---

你知道我如何只启动一次函数并等待请求发生吗？

假设你正在使用

$。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 */);
}

---

$（窗口）.scrollTop（）==（$（文档）.height（）-$（窗口）.height（））将使其仅执行一次调用。试试看。

但这只会发射一次，对吗？因此，如果我滚动到底部，函数将被调用，但是我希望函数在再次到达底部后再次启动。

$（文档）。height（）

将发生变化，因此它应该再次启动。有人可以解释为什么使用此特定条件：$（文档）。height（）-$（窗口）。height（））当页面底部的scrolltop并不总是大于document.height-window.height时？为什么不直接使用scrolltop==document.height？

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 */);
}