jQuery Infinite Scroll-快速滚动事件会多次触发 [英] jQuery Infinite Scroll - event fires multiple times when scrolling is fast

问题描述

好的，代码"下面的代码起作用，因为当您滚动到页面底部时，将触发AJAX函数，并将结果添加到页面上的#postswrapper div中.

Okay, the code below "works" in that when you scroll to the bottom of the page the AJAX function is fired and results are appended to the #postswrapper div on the page.

问题是:如果我到达页面底部时真的快速滚动，则AJAX将触发几次并将几组结果加载到#postswrapper div中(附加的不需要的"结果的数量取决于快速滚动触发了许多其他滚动事件.

The issue is: if I scroll really quickly when I reach the bottom of the page, the AJAX fires several times and loads several sets of results into the #postswrapper div (number of additional, 'unwanted' results are determined by how many additional scroll events were fired by scrolling quickly).

最终，每次用户到达最低点时，我只需要提供一组结果即可.我尝试添加计时器等，但无济于事.显然，这是将其他滚动操作存储在DOM中，然后按顺序触发它们.

Ultimately, I need only serve one set of results per time the user reaches the bottom. I've tried adding timers and such, but to no avail. It's obviously storing the additional scroll actions in the DOM and firing them in sequential order thereafter.

有什么想法吗?

我正在使用jquery.1.4.4.js(如果有帮助的话).无论如何，在这种情况下e.preventDefault()都不起作用.

I'm using jquery.1.4.4.js if that helps anybody. And e.preventDefault() doesn't work, in this situation, anyways.

$(window).scroll(function(e) {
    e.preventDefault();
    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
        $('div#loadmoreajaxloader').show();
        $.ajax({
            cache: false,
            url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'),
            success: function(html) {
                if (html) {
                    $('#postswrapper').append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html();
                }
            }
        });
    }
});

推荐答案

尝试存储某种数据，这些数据用于存储页面当前是否正在加载新项目.也许是这样的:

Try storing some kind of data that stores whether the page is currently loading new items. Maybe like this:

$(window).data('ajaxready', true).scroll(function(e) {
    if ($(window).data('ajaxready') == false) return;

    if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {
        $('div#loadmoreajaxloader').show();
        $(window).data('ajaxready', false);
        $.ajax({
            cache: false,
            url: 'loadmore.php?lastid=' + $('.postitem:last').attr('id'),
            success: function(html) {
                if (html) {
                    $('#postswrapper').append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html();
                }
                $(window).data('ajaxready', true);
            }
        });
    }
});

在发送Ajax请求之前，将清除一个标志，表明该文档尚未为接收更多Ajax请求做好准备. Ajax成功完成后，它将标志设置回true，并且可以触发更多请求.

Right before the Ajax request is sent, a flag is cleared signifying that the document is not ready for more Ajax requests. Once the Ajax completes successfully, it sets the flag back to true, and more requests can be triggered.

这篇关于jQuery Infinite Scroll-快速滚动事件会多次触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！