Infinite scroll fired twice on refresh from the bottom of page

Question

I have an infinite scroll set up with the following piece of code.

$(window).scroll(function () {
    if ($(window).scrollTop() >= $("#home_content").height() - $(window).height()) {
        if (isLastPage) {
            foo();
        } else {
            bar(); // JQuery AJAX call
        }
    }
});

This is inside document.ready(); The ajax call doesn't happen when the server sends a flag for the last page. This works fine in a normal scenario. But when I press F5(Refresh) from the bottom of the page, two simultaneous scroll events are fired,and it bypasses the flag (as the second call happens even before the flag is set) and duplicate data is loaded.

The only thing i know is it happens at the end of document.ready() function. Anyone, any idea??

Thanks in advance.

EDIT

There is no much relevant code other than this.

And this happens only in FF 17. In IE 9 when I do a fast scroll down, same scroll is fired twice

Possible duplicate? http://stackoverflow.com/questions/10727002/jquery-document-ready-fires-twice — Stevie, Jan 10 '13 at 10:11
What you have appears to be fine, but without seeing more code it's hard to diagnose the cause! — Stevie, Jan 10 '13 at 10:12
@Stevie: Its not document.ready() that is fired twice but window.scroll. — shazinltc, Jan 10 '13 at 10:34
By the sounds window.scroll is only called when document.ready() is fired, so for you to be getting two scroll events, document.ready() surely **must** be getting fired twice? Without seeing more, it's hard to say what's going on. — Stevie, Jan 10 '13 at 10:44

score 2 · Answer 1 · answered Mar 13 '13 at 13:26

You can use this debounce routine for all sort of event calls. Clean and reusable.

// action takes place here. 
function infinite_scrolling(){
    if ($(window).scrollTop() >= $("#home_content").height() - $(window).height()) {
        if (isLastPage) {
            foo();
        } else {
            bar(); // JQuery AJAX call
        }
    }
}

// debounce multiple requests
var _scheduledRequest = null;
function infinite_scroll_debouncer(callback_to_run, debounce_time) {
    debounce_time = typeof debounce_time !== 'undefined' ? debounce_time : 800;
    if (_scheduledRequest) {
        clearTimeout(_scheduledRequest);
    }
    _scheduledRequest = setTimeout(callback_to_run, debounce_time);
}

// usage
$(document).ready(function() {
    $(window).scroll(function() {
        infinite_scroll_debouncer(infinite_scrolling, 1000);
    });
});

score 1 · Accepted Answer · answered Jan 10 '13 at 10:20

1

This is just a workaround as we cannot see your complete code, but maybe thats can help:

var timeout;

$(window).scroll(function(){
      clearTimeout(timeout);
  timeout = setTimeout(function(){
      if  ($(window).scrollTop() >= $("#home_content").height() - $(window).height()){
                if (isLastPage){
                    foo();
                }else{
                    bar();//AJAX call
                }
            }
  },0);
});

answered Jan 10 '13 at 10:20

A. Wolff

74,033
9
94
155

made a small change. Increased the delay to 100 ms. Now works great in all the browsers. Thanks :) Btw let me know if there is any caveats if I do this. – shazinltc Jan 10 '13 at 10:59
You solved it man (y) and have bookmarked question so hats off for Question Poster too. – Smile Dec 08 '14 at 12:07

Infinite scroll fired twice on refresh from the bottom of page

2 Answers2

Linked