0

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

这是我的 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();
                }
            }
        });
    }
});
4

2 回答 2

4

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

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

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 对象的原生函数，但是它被 jQuery 的 jqXHR 对象公开，所以可以照常调用。

于 2012-07-10T14:10:09.957 回答
0

作为@JamWaffles 答案的补充：

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

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

于 2012-07-10T14:25:32.717 回答