jQuery 无限滚动 - 快速滚动时事件会多次触发

好的，下面的代码“有效”，因为当您滚动到页面底部时，AJAX 函数将被触发，并且结果将附加到页面上的 #postswrapper div 中。

问题是：如果我在到达页面底部时滚动得非常快，AJAX 会触发几次并将几组结果加载到 #postswrapper div 中（额外的“不需要的”结果的数量取决于额外滚动的数量）事件是通过快速滚动触发的）。

最终，每次用户到达底部时，我只需要提供一组结果。我尝试过添加计时器等，但没有成功。显然，它会将额外的滚动操作存储在 DOM 中，然后按顺序触发它们。

有任何想法吗？

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

$(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();
                }
            }
        });
    }
});

尝试存储某种数据来存储页面当前是否正在加载新项目。也许是这样的：

$(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，并且可以触发更多请求。