jQuery / Javascript 循环增量值不会通过 .height 比较重置（无限滚动脚本的一部分）

Question

目标是调用一个ajax函数来填充屏幕数据，直到它到达屏幕底部，然后停止。该脚本用于填充屏幕，但不会停留在底部（无限滚动脚本的一部分）。

停止机制是将窗口高度与最后添加数据的位置进行比较。如果到达底部，则将“i”设置为100，从而结束循环。

我放置了警报代码来观察这些值，果然，我看到 #load_data.height 点超过了 window.height（意味着加载的数据超过了屏幕底部），但“i”永远不会设置为 100那一点。

我尝试将“停止”代码放置在 3 个不同的地方，但似乎没有一个可以接受。

对问题的一些了解会有所帮助，或者建议一种替代方法来继续加载 ajax 数据，直到到达屏幕底部。代码如下：

    var myFunc01 = function(limit,start) {
      var i = 0;
      while (i < 100) {
        (function(i) {
          setTimeout(function() {
            start=start+limit;
            load_data(limit,start);//calls ajax routine to append data to #load_data

                //alert is for checking purposes only to view "if" values
                alert(
                     'window height:'+$(window).height()+'\n'+
                     'load data height:'+$("#load_data").height()+'\n'+
                     'value of i:'+i
                 );

                 if($("#load_data").height() > $(window).height()){i=100;}//this location does not work
          }, 1000 * i)
          if($("#load_data").height() > $(window).height()){i=100;}//this location does not work
        })(i++)
        if($("#load_data").height() > $(window).height()){i=100;}//this location does not work
      }
    };

    myFunc01(limit,start);

Answer 1

感谢 Kevin B 给了我使用递归函数的提示……之后就变得如此简单——一分钟两行代码。我会在这里发布我的解决方案，以防将来有人遇到这种情况。

仅供参考 - 我拥有的更完整的例程是无限/自动滚动，但我遇到的问题是页面的初始填充是基于固定数量的数据检索，比如 10。如果数据结束降落在页面中间，例程卡住了，用户必须缩小窗口并滚动到该点才能自动加载。

是的，本来可以检索到 100 并且无论如何都会超过底部，但这不是这里的目标。

解决方法是我的 ajax 函数，该函数一旦启动，就会调用自身，直到到达底部并退出。我添加到 ajax 调用底部的代码是：

start = start + limit;
if($("#load_data").height() < $(window).height()){load_data(limit,start);}

我注意到许多无限滚动的网络示例/教程并没有解决这个问题，即如果没有超过页面底部，就会卡在初始加载上。

下面是我的脚本：

<script>
    $(document).ready(function(){
        var limit = 10;//number of records to autoload each time
        var start = 0;//start at record 0
        var action = 'inactive';//initial status to get initial load
        function load_data(limit, start){
            var loads;
            $.ajax({
                 url:"questions_all_autoscroll_fetchdata.php",
                 method:"POST",
                 data:{limit:limit, start:start},
                 cache:false,
                 success:function(data){
                    $('#load_data').append(data);
                    //checks if quantity "limit" amount loaded.  If not, that means end of data reached.
                    //Each data piece has id="container", so counting them tells how many data pieces returned in "loads"
                    loads = $(data).filter('.container').length;
                    if(loads<limit){button_name = 'End of Data';}else{button_name='Please Wait, Loading More...';}
                    //append data returned to bottom of existing data
                    $('#load_data_message').html("<div id='please_wait' class='form-row text-center'>\
                          <div class='col-12'><button type='button' class='btn btn-warning'>\
                          "+button_name+"</button></div></div>");
                    action = "inactive";
                    //recursive part - keep loading data until bottom of screen reached, stop when reached, or when end of data
                    start = start + limit;
                    if(loads>=limit){
                        if($("#load_data").height() < $(window).height()){load_data(limit,start);}
                    }
                 }
            });            
        }
        //for initial loading of data to the bottom of page (through recursive load_data function
        if(action == 'inactive') {
            action = 'active';
            load_data(limit, start);
         }  
        //autoload portion.  when scrolling reaches bottom of screen, triggers another load of data
        $(window).scroll(function(){
            if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive'){  
                action = 'active';
                start = start + limit;
                setTimeout(function(){
                 load_data(limit, start);
                }, 1000);
            }
        });
    });
</script>