javascript - 如何加载和停止基于Ajax的垂直滚动功能+gif图像加载器

Question

我还没有能够完全实现这一点。问题是这个函数运行一次然后就停止了。我在这里错过了一个循环吗？

我尝试将 else { } block 移动到任何地方，但没有帮助。我也尝试过设置条件 else if (data=='') 但这也没有帮助。

如果我移动这个函数

if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {

在 if(data !=='') 之外，即使从数据库中获取了最后一个原始数据，我的滚动功能和 gif 图像也不会停止 。

如有任何帮助，我们将不胜感激。谢谢!

<script>
var limit = 20;
var start = 0;
var action = 'inactive';
var timeOutId;

function load_city_data(limit, start) {
    $.ajax({
        url:"ps_load_data.php",
        method:"POST",
        data:{limit:limit, start:start},
        cache:false,
        success:function(data) {
            $('#load_data').append(data);
            if(data !== '') {
                $('#imgLoader').html('<img class="animated-gif" src="img/ajax-loader.gif">');
                action = "inactive";
                $(window).scroll(function(){
                if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {
                    action = 'active';
                    start = start + limit;
                    timeOutId = setTimeout(function(){
                        load_city_data(limit, start);
                    }, 1000);
                }
            else {
                $('#load_data_message').html('<div class="reached">You have reached at the end of the listings</div>');
                action = 'active'; 
                $(window).off('scroll');
                clearTimeout(timeOutId);
                $('img[src="img/ajax-loader.gif"]').remove();
            }
            });
            } 
        }
    });
}
$(document).ready(function(){
    if(action == 'inactive') {
        action = 'active';
        load_city_data(limit, start);
    }
});
</script>

Answer 1

在 while 循环结束后立即使用 exit();。即使您在 ps_load_data.php 中运行多个查询，它也可以工作。