jQuery: Make event happen only once on scroll

Question

I'm trying to track how people are scrolling on my site using jQuery. At the moment, my code log messages to the console every time a person scrolls through 25%, 50%, 75% and 100% of the page's content.

As you can see I'm creating four separate functions for each stage, and preventing the events from firing all over again with the off()-function. However, to me this way of doing it seems excessive. Is there any better way of doing this without having to create as many functions?

The code below works just fine (as far as I can see). I'm just wondering if there are any better solution for what I'm doing?

PS. I'm a complete beginner, so please take this into consideration when responding :)

 $(function(){ var totalHeight = $('footer').offset().top - $(window).height(); var twentyFive = Math.round(totalHeight/4); var fifty = Math.round(totalHeight/2); var seventyFive = Math.round(totalHeight*0.75); function twentyFiveFunction(){ if( $(window).scrollTop() > twentyFive ){ console.log("25 % scrolled!"); $(window).off('scroll', twentyFiveFunction); $(window).on('scroll', fiftyFunction); } } function fiftyFunction(){ if( $(window).scrollTop() > fifty ){ console.log("50 % scrolled!"); $(window).off('scroll', fiftyFunction); $(window).on('scroll', seventyFiveFunction); } } function seventyFiveFunction(){ if( $(window).scrollTop() > seventyFive ){ console.log("75 % scrolled!"); $(window).off('scroll', seventyFiveFunction); $(window).on('scroll', scrollCompleteFunction); } } function scrollCompleteFunction(){ if( $(window).scrollTop() > totalHeight ){ console.log("100 % scrolled!"); $(window).off('scroll', scrollCompleteFunction); } } $(window).on('scroll', twentyFiveFunction); }); 

Answer 1

Using the jQuery one function should simplify it a bit.

http://api.jquery.com/one/

You wouldn't have to use off each time.

Answer 2

Something like this should work.

var max_scroll = 0;
var done = [false, false, false, false]
var height = $(document).height() - $(window).height();

$(window).on('scroll', function() {
    var perc = $(window).scrollTop() / height;
    if (perc <= max_scroll) return false;

    max_scroll = perc;
    var index = Math.floor(perc / 25) - 1;

    if (index >= 0 && !done[index]) {
        done[index] = true;
        console.log(((index + 1) * 25) + '% scrolled');
    }
});

Answer 3

Thanks for responding earlier. Anyhow, I came up with a good solution at the end. So if anyone's interested, here's what I came up with:

 var fired = [false, false, false, false]; $(window).on('scroll', function(){ var docHeight = Math.floor($(document).height()); var scrollTop = $(window).scrollTop() + $(window).height() + 500; for(i = 1; i < (fired.length + 1); i++){ if( ( (docHeight * 0.25 * i) < scrollTop ) && fired[i-1] == false ){ console.log(i/4*100 + "%!"); fired[i-1] = true; } } });