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

Answer 2

$（window）.scrollTop（） == （$（document）.height（） - $（window）.height（））只会执行一次调用。试试吧。

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

2 个答案: