CODEWITHSUNDEEP
javascriptevents
Daniel Haro
Daniel Haro

Reputation: 391

JavaScript event handling scroll event with a delay

Can someone explaine and help me with this. My webpage is slugish because the scroll function is dragging it down. I need to add a delay but don't understand how to do this.

$(window).scroll(handleScroll);

Upvotes: 21

Views: 40706

Answers (2)

Oleksandr Pyrozhok
Oleksandr Pyrozhok

Reputation: 436

For scroll, you most likely need a throttle function like in Lodash or Underscore; great example:

function throttle(func, timeFrame) {
  let lastTime = 0;
  return function () {
      const now = new Date();
      if (now - lastTime >= timeFrame) {
          func();
          lastTime = now;
      }
  };
}

This is a simple implementation from the Underscore repository

It depends on what you implement by scrolling callback. In some cases, the throttle will be much better to use. For example, infinite scrolling.

So debounce would trigger only when the user stops scrolling and we need to start fetching the content before the user reaches the bottom.

But with throttle, we can warranty that we are constantly checking how far we are from the bottom.

Conclusion:

  • debounce: Grouping a sudden burst of events (like keystrokes) into a single one.
  • throttle: Guaranteeing a constant flow of executions every X milliseconds. Like checking every 200ms of your scroll position to trigger a CSS animation.
  • requestAnimationFrame: a throttle alternative. When your function recalculates and renders elements on the screen and you want to guarantee smooth changes or animations. Note: no IE9 support.

Upvotes: 9

Peter-Paul van Gemerden
Peter-Paul van Gemerden

Reputation: 7011

You could write a simple throttle debounce function to limit the times per second the scroll event will be handled.

function debounce(method, delay) {
    clearTimeout(method._tId);
    method._tId= setTimeout(function(){
        method();
    }, delay);
}

$(window).scroll(function() {
    debounce(handleScroll, 100);
});

This will make sure there's at least 100ms between each call to handleScroll (or, in other words, it's called at most 10 times per second).

As zzzzBov pointed out, what Zakas describes as a throttle function is actually a debounce function. The difference is that debounce discards the superfluous scroll events, while a throttle function should queue them up to be handled later (but at a given maximum rate).

In the case of scroll events, you don't want real throttling.

Upvotes: 51

Related Questions