jQuery Window Scrolling Issue

I have a page that initially loads 20 product. When the user hits the bottom of the page, it loads 20 more and appends it to the existing product results. Due to a problem with IE9 not performing this adequately, we decided to load more product when a user scrolls 25 pixels above the bottom of the page.

The problem is, if the user scrolls too slow, the even will fire multiple times and load 40, 60, 80, 120, even 160 product, depending on how many times the event fires. If they scroll fast, it typically works.

I think the event is firing too fast, and I'm not sure how to get the jQuery to do a single load only once if a user scrolls slowly.

I messed around with bind() and unbind() but couldn't get it to work quite right.

Does anyone have any thoughts on how to make this work (or have another solution entirely)?

    $(window).scroll(function () {
        var sum = $(window).scrollTop() + ($(window).height() * 1) + 25;
        var origDocHeight = $(document).height();
        var docHeight = $(document).height();


        // Load new data
        /////////////////////////////////////////////////
        if (sum >= docHeight) {

            // Loading product
            var thisURL = '/Products/moreResults.cfm?version=' + version;
            $.get(thisURL, {}, function (data) { $(".scrollContainer").append(data) })

        } // END IF
    });

Select allOpen in new window