CODEWITHSUNDEEP
javascriptjquery
tamak
tamak

Reputation: 1591

how to detect when page scrolled to bottom and execute a function ONE time

I am using ajax to dynamically load XML from a web service, the returned records are limited to just 25 items for each url 'load' or 'call'.... to work around that I have a process whereby the user scrolls down the page and when they reach 90% of the page height (or when they reach page bottom - not sure which I'll choose yet), a variable named startindexnum is incremented by 25.

so startindexnum starts out at 25... then after the first 'fire' of the function, the startindexnum becomes 50, on the 3rd it becomes 75, etc. etc.

my problem is that it fires multiple times and is somewhat erratic - processing multiple times when I scroll to the bottom and increasing by MORE than 25 sometimes (no doubt a result of running multiple times I think).

anyone have any idea what I need to tweak to get this to correctly generate the incremental startindex variable to append to my ajax URL where Im retrieving XML? thanks.

var scrollcount = 1;
var startindexnum = 25;
var processing;

$(document).ready(function(){
    $(document).scroll(function(e){
       if (processing)
            return false;

            window.onscroll = function(ev) {

             if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
                //if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9){
                    // you're at x%  of the page
                    processing = true;
                    scrollcount = scrollcount + 1;
                    startindexnum = scrollcount * startindexnum;
                    console.log(scrollcount);
                    docall();

                    processing = false;

                };
            };
    });
});

Upvotes: 0

Views: 412

Answers (2)

Mark Graham
Mark Graham

Reputation: 171

In addition to epascarello's post...

you don't need the $(document).scroll(fn) and the window.onscroll, which you are attaching to every time your document scroll handler is executed. A few things:

1) Firstly, take a look at this scroll post by John Resig. Scrolling by J.Resig

2) If you want the jquery method then use window instead of document $(window).scroll(fn).

3) If not then I think the following will work for you:

var scrollcount = 1;
var startindexnum = 25;
var processing;

$(document).ready(function(){
    window.onscroll = function(ev) {
        if (!processing) {   
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
                processing = true;
                scrollcount = scrollcount + 1;
                startindexnum = scrollcount * startindexnum;
                console.log(scrollcount);
                docall();
            }
        }               
    }
});

Upvotes: 0

epascarello
epascarello

Reputation: 207521

The problem is I am betting docall() is an asynchronous call, so setting of processing to false after that call does nothing to block the future scroll events.

The setting of false is happening before the results are returned. You want to set processing back to false when docall() is done doing its task. 

         if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
            //if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.9){
                // you're at x%  of the page
                processing = true;
                scrollcount = scrollcount + 1;
                startindexnum = scrollcount * startindexnum;
                console.log(scrollcount);
                docall();

                //processing = false;  <--get rid of this

            };

and

function docall(){

    //When you are done fetching the new data and update the page set 
    function AjaxCallIsDone() {
        processing = false;
    }

}

Upvotes: 1

Related Questions