ajax – jQuery：非常简单的自制无限滚动

我知道有多个插件,但我想知道如何让我自己的东西以我想要的方式工作.

首先,当我滚动到我的页面底部时,我想触发一个名为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我不希望再次触发该函数,因为那时没有更多的活动.

任何想法如何我只能发射一次该功能并等待请求发生？

解决方法

假设您正在使用$.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 */);
}