onScroll event called multiple times

I want to load more content when the user scrolls the webpage. I tried using

1. onScroll event javascript which 开发者_运维问答is getting called multiple times

2. jQuery .scroll() method which is also called multiple times.

How do I handle this? Is it a browser issue?

Note: I am calling onScroll = "function()" on body tag of HTML.

On every scroll any scroll method would be called

So you should check when the user scrolls to the bottom, then load more content.

If you're getting a series of events as the window moves (similar to what happens on a resize event), then one trick is to set a timer for 1-2 seconds on the first scroll event, but not do anything yet. If a subsequent scroll event comes in before the timer fires, you stop the previous timer and set a new one. When the user stops scrolling for a brief time, the timer will fire and you can then process the scroll event. If they scroll some more, the whole process will repeat.

jQuery pseudo-code example:

var scrollTimer = null;
$("#target").scroll(function(){
    if (scrollTimer) {
        clearTimeout(scrollTimer);  // clear previous timer
    }
    // set timer while we wait for a pause in scroll events
    scrollTimer = setTimeout(function() {
        scrollTimer = null;  // timer done here
        // do your dynamic loading here
    }, 1000);
});

Load content while scrolling: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/