如何让.scrollTop在进行.ajax调用时不会跳动

Question

我正在做某种无限的画廊。我的OnScroll函数检测滚动页面底部是否存在100px，当它是时，会执行ajax调用，并将输出附加到div。

问题是closeToBottom函数太快，所以它有时会在滚动向上回退之前从底部滚动100次像素两次或甚至4-5次。

我该如何让closeToBottom更加微妙，这样我的ajax调用一次只会被调用一次 ，滚动会立即启动？

function onScroll(event) { 
    // Check if we're within 100 pixels of the bottom edge of the browser window. 
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100); 
    if(closeToBottom) { 

     $.ajax({ 

       url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset, 
       cache: false 
     }).done(function(html) { 
      offset = offset + numberposts; 
      $("#tiles").append(html); 


     }); 
} 

Answer 1

您可以引入您在ajax请求运行时设置的变量，并且只有在其他运行时才启动另一个变量。像这样：

var ajaxLoading = false; 
function onScroll(event) { 
    // Check if we're within 100 pixels of the bottom edge of the browser window. 
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100); 
    if(closeToBottom && !ajaxLoading) { 
     ajaxLoading = true; 
     $.ajax({ 

       url: "<?php echo get_template_directory_uri() ?>/ajaxcall.php?offset="+offset, 
       cache: false 
     }).done(function(html) { 
      offset = offset + numberposts; 
      $("#tiles").append(html); 
      ajaxLoading = false; 

     }); 
}