javascript - jQuery scroll event fire once per scroll

I have some jQuery code to check if I've scrolled to the bottom of the window.

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

My appendToGrid() function scrolls the user to the top of the page and adds content. Problem is, I need this function called once per scroll. As I have it now, it is called multiple times per scroll.

If I change it to

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

it will only fire once total, but I need it to fire once per scroll so the user can scroll to the bottom and keep getting sent back to the top of the page.

I've also tried the below but it still fires multiple times.

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

I have some jQuery code to check if I've scrolled to the bottom of the window.

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

My appendToGrid() function scrolls the user to the top of the page and adds content. Problem is, I need this function called once per scroll. As I have it now, it is called multiple times per scroll.

If I change it to

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

it will only fire once total, but I need it to fire once per scroll so the user can scroll to the bottom and keep getting sent back to the top of the page.

I've also tried the below but it still fires multiple times.

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

Share Improve this question edited Nov 10, 2017 at 2:55 Shiladitya 12.2k17 gold badges28 silver badges42 bronze badges asked Nov 9, 2017 at 22:38 Evan Hessler 3371 gold badge4 silver badges24 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

You could add a cooldown timer once appendToGrid is called. This is similar to your fired flag but it only resets after a 2000ms wait. You can adjust that time to whatever feels best.

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

Another option would be to throttle the logic so it only happens after the user stops the action for a period of time.

$(function(){
  //cache mon 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);
  });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery scroll event fire once per scroll - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)