在到达页面底部之前加载滚动项目。 Javascript 代码崩溃

Question

我正在尝试加载更多滚动项目。该代码有效，用户到达页面底部。每次用户滚动到页面底部时，都会加载 9 个项目。

当我尝试在用户到达页面底部之前加载 9 个项目时出现此问题。然后等待这些项目被加载，然后再次检查条件 (currentScroll >= goal)。

此时，只要条件为 TRUE (currentScroll >= goal)，所有项目都会立即加载。 我猜这是因为 currentScroll 变量在滚动时不断计数，而第一组项目尚未加载。结果 $(document).height() 仍然相同，这会影响目标变量：var goal = $(document).height() - $(window).height();

我尝试使用 while 循环（请参阅我的代码中的注释部分），但代码崩溃了。

有没有什么办法可以让程序在条件为TRUE的情况下等待该组item（9个item）被加载然后再检查？

$(window).scroll(function() {

    var currentScroll = $(window).scrollTop();


   var goal = $(document).height() - $(window).height(); // Bottom of the page
   
   goal = goal*0.5; // Load more items before reach bottom of the page
   
   // The following parts check if all the items are loaded. That works!!
   var result_count = document.getElementsByClassName('yacht-count')[0].innerHTML

      total_results_to_show = group_of_villas_showed*results_to_show;
      
      
      if(result_count/total_results_to_show<=1){
          goal = currentScroll*2;
          console.log("Finish");
      }
   
   // Check if the current scroll is greater than the setted goal
    if (currentScroll >= goal){
            console.log("start loading villas");
            ajaxGet(guests_value,destinations_value,sort_by,current_page);
            current_page++;
            group_of_villas_showed+=1;
            console.log("loading villas");
    }
    
    // With the use of this Loop program crashes
    /*
    while(currentScroll >= goal){
        goal = $(document).height() - $(window).height();
        var currentScroll = $(window).scrollTop();
        goal = goal*0.5;
    }
    */
    
});


ajaxGet = (guests_value,destinations_value,sort_by,page, replace = false) => {
     $.ajax({
       type: 'GET',
       url: ajax_url,
       data: {
         guests: guests_value,
         destination: destinations_value,
         sort_by: sort_by,
         page:page,
       },
       dataType: 'json',
       beforeSend: function(){
         $('#loading-image').removeClass('hide');
         $('.yachts-search-page').addClass('loading-more');
       },
       success: function (data) {
         //console.log('ajax success');
         $('.yachts-search-page').removeClass('loading-more');
         $('#loading-image').addClass('hide');
         if(replace){
           $('body .load-more-wrapper').show();
           $('body .yachts-inner').html(data.content);
           current_page = 1;
         }
         else
           $('body .yachts-inner').append(data.content);

         $('body .yacht-count').text(data.yacht_count);
         newQueryString(guests_value,destinations_value,sort_by,page);
       },
       error: function(data){
         //console.log('error wtf');
       }
     });
   }

Answer 1

感谢 Jay Kariesch 对此site 的评论，我找到了解决方案。我使用 _.throttle 每 300 毫秒检查一次条件是否为 TRUE，这足以加载下一组别墅。

非常感谢你们的回复。你非常有帮助！

这是我现在的工作代码：

$(document).ready(function(){
        
        
        
      // Check every 300ms the scroll position
      $(document).on('scroll', _.throttle(function(){
        check_if_needs_more_content();
      }, 300));
    
      function check_if_needs_more_content() {     
        pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
        

      
      // Check if all the items are loaded.
      var result_count = document.getElementsByClassName('yacht-count')[0].innerHTML

      total_results_to_show = group_of_villas_showed*results_to_show;
      
      //console.log("results_to_show",results_to_show);
      console.log("total_results_to_show",total_results_to_show);
      console.log("result_count",result_count);
      
      if(result_count/total_results_to_show<=1){
          finish_check=1;
          console.log("Finish");
      }
      else
        finish_check=0;
        

        //Items load condition
        if ((pixelsFromWindowBottomToBottom < 500)&&(finish_check==0)){
          //console.log("start loading villas");
          ajaxGet(guests_value,destinations_value,sort_by,current_page);
          current_page++;
          group_of_villas_showed+=1;
        }
      }
    });