jQuery - how to treat scroll as single event?

Question

When I bind function to scroll and scroll mousewheel once, the function runs seven or eight times. I want it to run only once when I scroll the mousewheel once, is this possible? I use this code:

$(document).ready(function () {
    $(window).bind('scroll', function() {
        alert("Scroll.");          
    }   
    });
});

Answer 1

You can use throttle function from jQuery throttle debounce plugin.

$(function() {
    $(window).bind('scroll', $.throttle(100, function() {
        console.log('scroll');
    }));
});

Answer 2

just a variation of Aruns answer:

Similar approach,just that the event get's fired immediately and is then prevented to be handled again for an interval of time. So that you wouldn't have to wait before handling the event.

$(document).ready(function () {
    var locked = false
        , timeout;

    $(window).bind('scroll', function() {
        //do nothing if still locked
        if(true === locked){
            return false;
        }
        //lock
        locked = true;

        //do something if not locked
        alert('scroll!')

        clearTimeout(timeout)
        timeout = setTimeout(function(){
            //unlock
            locked = false;         
        }, 1000)
    });
});

Answer 3

If by "once" you mean, once-per-page-load, you could unbind the event in the listener with the off() method. http://api.jquery.com/off/

There's also the possibility of namespacing events like:

scroll.namespace is still the same event, but you can unbind it specifically.

$(document).ready(function () {
    $(window).on('scroll.myEvent', function() {
        $(window).off('scroll.myEvent');
        alert("Scroll.");          
    }   
    });
});

Answer 4

Try

$(document).ready(function () {
    var timerId;
    $(window).bind('scroll', function() {
        clearTimeout(timerId)
        timerId = setTimeout(function(){
            alert("Scroll.");          
        }, 200)
    });
});

Demo: Fiddle

Answer 5

If you want to detect scrolling only once, use this:

$(function () {
    var done = false;
    $(window).bind('scroll', function() {
       if (!done){
           alert("Scroll.");
           done = true;
       }
   });
});

but if you want to detect every scroll event, try something like the answer 4