Question

I have a simple AJAX function which loads more search results as the user scrolls down a page.

$(window).scroll(function () { // fire the load stuff function as scroller gets near the bottom of the page
  if ($(window).scrollTop() >= parseInt($(document).height() - $(window).height() - 150)) {
       var finished = 1;
       if (finished == 1) {
          finished = 0;
          loadMore(function () { finished = 1; });
       };
    };
});

This works, except it’s firing the loadMore function every time the window is scrolled, obviously.

So, checking the Firebug console, it’s loading loads of times.

What it needs to do is not run another instance of loadMore until the last instance has finished.

I have tried putting in a callback and a variable (the finished variable you see in the code) but this doesn’t work.

How can I ensure the user can scroll, but the function is only trigger when there is no other instance of this function processing?

Answer 1

I think this will work, you need to set the finished outside the scroll event, because it is executed each time the user scrolls

var finished = 1;
        $(window).scroll(function () { // fire the load stuff function as scroller gets near the bottom of the page
      if ($(window).scrollTop() >= parseInt($(document).height() - $(window).height() - 150)) {           
           if (finished == 1) {
              finished = 0;
              loadMore(function () { finished = 1; });
           };
        };
    });