Question

I have a page with “infinite scroll”. It calculates the difference between the end of the page and the current page and loads more content if this difference is small enough. The code is soemthing like this using jQuery:

$(window).on('scroll', function() {
    if (window.pageYOffset > loadMoreButton.offsetTop - 1000)
        # load more content via ajax
}

Now, the problem is that every time I scroll, this event fires multiple times per scroll. I would like fire at most every x milliseconds. How would I do this?

Answer 1

Check out the Underscore.js library’s “throttle” method.

http://underscorejs.org/#throttle

The example it gives is exactly what you’re asking about – limiting how often you have to handle scroll events.