4

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

首先，当滚动到页面底部时，我想触发一个调用的函数，该函数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我不希望再次触发该函数，因为这样就没有更多的活动了。

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

4

2 回答 2

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 */);
}
于 2012-05-04T17:13:12.587 回答
0

$(window).scrollTop() == ( $(document).height() - $(window).height() ) 将使它只执行一次调用。尝试一下。

于 2013-12-20T11:37:46.627 回答