How to stop scroll() triggering events multiple times

Question

Im using jquery.visible.js to detect when a DIV is in view ( it starts the animation on plug in that has like a circle animation effect). But it keeps firing every time i use the scroll wheel, multiplying itself indefinitely and i cant find a way to stop it with off() or unbind()? thanks!

 // Check vertical for circliful using jquery.visible.js
$(window).scroll(function(){
    if ($("#moreSection").visible(true)){


        // trigger circliful
        $('#myStat-1').circliful() // this wont stop firing

}
});

Answer 1

as #Shikkediel pointed out scroll() gets fired on frame rate changes. so every scroll can trigger it hundreds of times.

you can do this:

$(window).scroll(function(){
    if ($("#moreSection").visible(true)){
        doActionAndStopScript();
    }
});

function doActionAndStopScript(){
    $('#myStat-1').circliful() // now it will fire once
    $(window).unbind('scroll');
}

you can only call the unbind() from outside the $(window)

Answer 2

The scroll event will fire once for every pixel that is scrolled. To work around this behaviour you can use a timer which will only execute your logic after scrolling has stopped for x milliseconds. Try this:

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if ($("#moreSection").visible(true)){
            $('#myStat-1').circliful();
        }
    }, 250);
});

250ms is normally long enough to wait to fire your code. You can tune this value as required.