Question

我正在进行无休止的滚动。每次页面到达底部时，都会对新的数据集进行ajax调用。但是，如果没有更多数据和数据请求返回null或空响应，如何停止ajax调用新数据？

var page = 1;
    var endOfDb  = false;
    var fetchUrl = "{{ path('gallery_gallery_fetch') }}";

    $(document).ready(function () {
        fetchGallery();

        $(window).scroll(function () {
            if (endOfDb ==false) {
                if ($(window).scrollTop() + $("#footer").height() + $(window).height() >= $(document).height()) {
                    fetchGallery();
                }
            }
        });
    });

    function fetchGallery() {
        endOfDb  = true;
        $.get(fetchUrl, {'page': page}).success(function (response) {
            if (response != "" || !isEmpty(response)) {
                endOfDb  = false;
            }
            $("#gallery_prints").append("<li>" + response + "</li>");
            page++;
        });
    }

Answer 1

试

var page = 1;
stop = false;
var fetchUrl = "{{ path('gallery_fetch') }}";

$(document).ready(function () {
    fetchGallery();

    $(window).scroll(function () {
        if (stop == false) {
            if ($(window).scrollTop() + $("#footer").height() + $(window).height() >= $(document).height()) {
                fetchGallery();
            }
        }
    });
});

function fetchGallery() {
    $.get(fetchUrl, {'page': page}).success(function (response) {
        if (response != "" || !isEmpty(response)) {
            stop = true;
        }
        $("#gallery").append("<li>" + response + "</li>");
        page++;
    });
}

<强>更新

var page = 1;
stop = false;
var fetchUrl = "{{ path('gallery_fetch') }}";

$(document).ready(function () {
    fetchGallery();

    $(window).scroll(function () {
        if ($(window).scrollTop() + $("#footer").height() + $(window).height() >= $(document).height()) {
            fetchGallery();
        }
    });
});

function fetchGallery() {
    if (stop == false) {
        stop = true;
        $.get(fetchUrl, {'page': page}).success(function (response) {
            if (response != "" || !isEmpty(response)) {
                stop = true;
            }
            $("#gallery").append("<li>" + response + "</li>");
            page++;
            stop = false;
        });
    }
}

更新2

var page = 1;
stop = false;
var fetchUrl = "{{ path('gallery_fetch') }}";

$(document).ready(function () {
    fetchGallery();

    $(window).scroll(function () {
        if ($(window).scrollTop() + $("#footer").height() + $(window).height() >= $(document).height()) {
            fetchGallery();
        }
    });
});

function fetchGallery() {
    if (stop == false) {
        $.get(fetchUrl, {'page': page}).success(function (response) {
            if (response == "" || isEmpty(response)) {
                stop = true;
            }else{
                $("#gallery").append("<li>" + response + "</li>");
                page++;
                stop = false;
            }
        });
    }
}

Answer 2

$(document).ready(function(){
var stop = 0;  
$(window).scroll(function () {
   if(stop != 0)
    {
     console.log(stop); // call your functions here
    }
   });
})

在window.scroll之前替换你正在进行的条件检查，并在window.scroll中移动它。您的功能现在将取决于停止的值。

Answer 3

即使没有来自db的数据，总会有一些响应。这就是为什么我决定像这样检查响应的大小

   if ( (response + '').length > 50) {
                endOfDb = false;
            }

不行吗

JavaScript AJAX：请求返回空时停止无限滚动

3 个答案: