如何加载和停止基于Ajax的垂直滚动函数+ gif图像加载器

Question

我未能完全做到这一点。问题是这个函数只工作一次，然后停止。我错过了一个循环吗？

我尝试过将else { }块移动到任何地方，但是没有帮助。我也试图把条件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

这里提到的答案是：How to stop my scroll function once MySql has fetched all the data

，这也是工作脚本

 $(document).ready(function(){
 var limit = 100;
 var start = 0;
 var action = 'inactive';
 function load_country_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 == '')
    {
     $('#load_data_message').html("No Data Found");
     action = 'active';
    }
    else
    {
     $('#load_data_message').html("<img src='img/ajax-loader.gif'>");
     action = "inactive";
    }
   }
  });
 }
 if(action == 'inactive')
 {
  action = 'active';
  load_country_data(limit, start);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
  {
   action = 'active';
   start = start + limit;
   setTimeout(function(){
    load_country_data(limit, start);
   }, 2000);
  }
 });
});

只需确保您的url:"ps_load_data.php“只有一个正在运行的获取查询，否则它将发生冲突，甚至在获取最后一行数据之后也不会隐藏/停止您的gif图像。谢谢!