Question

For some weird reason the ajax function below is firing twice. The loadMoreResults(); function is used to retrieve data from server. I tracked the data sent to the server using google developer tool it showed that the ajax request was fired twice in a row. I guess this happens when the user scroll fast.

 //Executed when user has scrolled bottom of the page
$(window).scroll(function (e) {
 if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadMoreResults();
 }
 });

Any idea on how to prevent this from happening?
Appreciate your help.

Answer 1

As you said, it could be because the user is scrolling too fast and the document does not get to be updated with the new results.

Try using a flag that will prevent calling the loadMoreResults() while the function is still executing.

You set it to true when the function starts and at the end, after you get your results, you set it to false. The check of the flag can be placed right at the beginning of the loadMoreresults() function, before setting the flag to true.

eg:

function loadMoreResults() {
  if (flag) return;
  flag = true;
[...]
  flag = false;
}