Question

我有一些jQuery代码来检查我是否已滚动到窗口底部。

$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        appendToGrid();
    }
})

我的appendToGrid（）函数将用户滚动到页面顶部并添加内容。问题是，我需要每个滚动调用一次这个函数。就像我现在所说的那样，每次滚动都会多次调用它。

如果我将其更改为

$(window).one('scroll',function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        appendToGrid();
    }
});

它只会触发一次，但我需要每次滚动一次，所以用户可以滚动到底部并继续发送回页面顶部。

我也尝试了以下但它仍然会多次发射。

var fired = false;
$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height() && !fired) {
        fired = true;
        appendToGrid();
        fired = false;
    }
})

Answer 1

一旦调用了appendToGrid，你就可以添加一个冷却计时器。这与您的fired标志类似，但只会在等待2000毫秒后重置。您可以将时间调整到最佳状态。

var recentScroll = false;
$(window).on('scroll',function() {
    if(!recentScroll && $(window).scrollTop() + $(window).height() == $(document).height()) {
        appendToGrid();
        recentScroll = true;
        window.setTimeout(() => { recentScroll = false; }, 2000)
    }
});

Answer 2

另一种选择是限制逻辑，使其仅在用户停止一段时间后才会发生。

＆＃13;

$(function(){
  //cache common variables so they are created once
  var $window = $(window);
  var $document = $(document);
  var debounce;
  
  $window.on('scroll', function(){
    //clear the delay if it's not finished yet
    if (debounce) clearTimeout(debounce);
    
    //start a new delay
    debounce = setTimeout(function(){
      //remove reference so another delay can start
      debounce = null;
      //perform whatever logic you normally would do
      if($window.scrollTop() + $window.height() == $document.height()) {
        appendToGrid();
      }
    }, 300);
  });
});

＆＃13;

每次滚动jQuery滚动事件一次

2 个答案: