JavaScript event handling scroll event with a delay

Question

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);

Answer 1

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.

Answer 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