11

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);
Daniel Haro
  • 291
  • 1
  • 2
  • 11

2 Answers2

36

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.

Peter-Paul van Gemerden
  • 6,791
  • 27
  • 36
  • 8
    That's actually [debouncing](http://davidwalsh.name/function-debounce), which is slightly different from throttling. – zzzzBov Feb 25 '14 at 18:27
  • How can I use parameters in the function? For example I need something like debounce(handleScroll(parameter_1,parameter_2), 100) – Garavani Feb 10 '22 at 05:54
  • 1
    @Garavani: you could wrap it in an inline function: `debounce(function () { handleScroll(parameter_1, parameter2) }, 100)`. – Peter-Paul van Gemerden Mar 11 '22 at 21:50
2

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

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

This is simple implementation from this repo

Oleksandr Pyrozhok
  • 168
  • 1
  • 8