jQuery Infinite Scroll - 快速滚动时多次触发事件答案

【问题标题】：jQuery Infinite Scroll - event fires multiple times when scrolling is fastjQuery Infinite Scroll - 快速滚动时多次触发事件
【发布时间】：2011-08-03 20:31:45
【问题描述】：

好的，下面的代码“有效”，因为当您滚动到页面底部时，会触发 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();
                }
            }
        });
    }
});

【问题讨论】：

不想要的结果是“loadmore.php”脚本在不必要的时候被执行了几次。我只需要，每次用户到达页面底部时，该代码块运行一（1）次，通过 loadmore.php 加载适当的结果，并且在用户到达页面底部之前不加载任何其他内容再次。

标签： jquery infinite-scroll

【解决方案1】：

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

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

【讨论】：

是的，伙计！我之前也有类似的逻辑，但你搞定了。奇迹般有效。干杯！
很棒的破解，谢谢！我将问题中的代码和答案结合起来解决了同样的问题，谢谢！
这简直太美了。
你也可以使用window.whatever = true。
太棒了！一直在努力解决类似的问题。

【解决方案2】：

是的，这非常有效，您可以创建一个变量来判断 ajax 当前是否正在从脚本中获取更多数据，以便您知道是否发送另一个 ajax 请求。这使得无限滚动更加平滑且故障更少，因此当用户到达断点时它不会一次触发很多次。

【讨论】：