Throttling events

A major issue with the infinite scrolling feature as we have implemented it in Listing 10.10 is its performance impact. While our code is brief, the checkScrollPosition() function does need to do some work to measure the dimensions of the page and window. This effort can accumulate rapidly, because in some browsers the scroll event is triggered repeatedly during the scrolling of the window. The result of this combination could be choppy or sluggish performance.

Several native events have the potential for frequent triggering. Common culprits include scroll, resize, and mousemove. To account for this, we need to limit our expensive calculations, so that they only occur after some of the event instances, rather than each one. This technique is known as event throttling.

$(document).ready(function() {
  var timer = 0;
  $window.scroll(function() {
    if (!timer) {
      timer = setTimeout(function() {
        checkScrollPosition();
        timer = 0;
      }, 250);
    }
 ...