jQuery AJAX 请求加载两次答案

【问题标题】：jQuery AJAX-request loading twicejQuery AJAX 请求加载两次
【发布时间】：2012-07-10 14:02:05
【问题描述】：

我正在构建一个无限滚动，当滚动条到达页面底部时，它会从数据库中获取结果。除了一件小事，一切都很好；如果我快速向下滚动，它会获取两次结果，就像函数执行了两次一样。

这是我的 jQuery 代码：

$(window).scroll(function () {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1];
        $('#loader').show();
        $.ajax({
            url: "ajax_loadmore.php?lCom=" + ID,
            success: function (result) {
                if(result) {
                    $('#moreComments').append(result);
                    $('#loader').hide();
                } else {
                    $('#loader').hide();
                }
            }
        });
    }
});

【问题讨论】：

Javascript 是有点单线程的；您是否尝试过简单地标记一个标志以指示已调用内容的 ajax 请求并因此简单地退出？

标签： jquery

【解决方案1】：

您的 AJAX 请求很可能会一个接一个地排队，因为它们是异步的，尽管 JavaScript 本身大多是单线程的。

您可以使用abort() 方法确保一次只运行一个请求。你需要将$.ajax()返回的jqXHR对象赋值给一个变量：

var request;

$(window).scroll(function () {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        var ID = $('.stbody:last').attr('id').match(/stbody(\d+)/)[1];
        $('#loader').show();

        // Abort any currently executing request
        if(request) {
            request.abort();
        }

        // Make a new request
        request = $.ajax({
            url: "ajax_loadmore.php?lCom=" + ID,
            success: function (result) {
                if(result) {
                    $('#moreComments').append(result);
                    $('#loader').hide();
                } else {
                    $('#loader').hide();
                }
            }
        });
    }
});

abort() 是XMLHttpRequest object 的原生函数，但是它被 jQuery 的 jqXHR 对象暴露出来，所以可以照常调用。

【讨论】：

谢谢！这有帮助。我确实将它与下面的答案结合起来以获得更快的结果。我现在确实有另一个问题，那就是它由于某种原因不能在 Firefox 中工作。它可以在 IE 9、Chrome 和 Safari 中工作。任何已知的 Firefox 的 jquery 问题？
你检查过 FF 的调试控制台是否有错误（或者如果你安装了 Firebug 的话）？

【解决方案2】：

作为@JamWaffles 答案的补充：

您可以使用return; 退出函数，而不是调用request.abort();。否则，您将对相同的数据发出两个 AJAX 请求 = 对您的服务器造成不必要的负载。但是，您应该在成功和错误回调中使用 request = null; 重置请求对象。

PS。会将此作为评论发布，但我不能。

【讨论】：