Question

当滚动器碰到页面底部时，我正在构建一个无限的Scroll，它从数据库中获取结果。除了一件小事之外，一切正常;如果我快速向下滚动，它会取两次结果，就像函数执行两次一样。

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

Answer 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对象公开，因此可以像往常一样调用。

Answer 2

作为@JamWaffles的补充回答：

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

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

Jquery AJAX请求加载两次

2 个答案: