Question

I have the following javascript code used to create a kind of infinite scroll UI. The problem is when I scroll with the mouse wheel it will generate several requests.

sample HERE

var canLoad = true;

$(window).scroll(function()
{ 
    if($(window).scrollTop() == $(document).height() - $(window).height() && canLoad)
    {
    canLoad = false;
            $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "/loadmore.html",
        success: function(html)
        {
            if(html)
            {
            var $html = $(html);
            $html.imagesLoaded(function() {
                $('div#loadmoreajaxloader').hide();
                $("#container").masonry('appended', $html, true);
            }).appendTo($("#container"));
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more backgrounds to show.</center>');
            }
        }
        });
        canLoad = true;
    }
});

Answer 1

Your best option would be to use a timer within your scroll function, and cancel it before each request:

var timer;

$(window).scroll(function()
{
    timer && clearTimeout(timer);

    timer = setTimeout(function()
    {
        // Run whatever code you want here...
    }, 300);
});

Here’s the fiddle: http://jsfiddle.net/FcxSL/