Throttling events

A major issue with the infinite scrolling feature as we've 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 will implement event throttling. This technique involves limiting our expensive calculations so that they only occur after some of the event occurrences, rather than each one. We can update our code from Listing 10.13 to implement this technique as follows:

$(() => { 
  var timer = 0;

  $(window)
    .scroll(() => {
      if (!timer) {
        timer = setTimeout(() =...