Debounce mouse wheel

问题

I'm building a custom jQuery code to allow the user to be guided through a webpage by using the mousewheel.

The code I'm building is simulair to this page: Link

Everything works fine, but the mousewheel event fires multiple times by default, making the script 'skip' complete divs and scroll down/up multiple times, instead of just once.

I need a way to limit the mousewheel to fire only once. In my quest of finding the answer I found Ben Alman's script wich uses 'debounce'.

My question here is; is there a way to debounce EVERY mousewheel event instead of debouncing it's function? So basicly telling 'mouse wheel' to fire once every 500ms, and ignore all fires that were send in that 500ms period.

回答1:

How about using setTimeout to control the firing of events - as:

$("div").html((new Array(1000)).join(" test")).on("mousewheel DOMMouseScroll MozMousePixelScroll", function()
{
    if (!$(this).data('flag'))
    {
        var self = this;
        $(this).data('timeout', window.setTimeout(function()
        {
            $(self).data('flag', false);
        }, 500));

        $(this).data('flag', true);

        console.log('here');
    }
});

Fiddle: http://jsfiddle.net/aN4hU/

来源：https://stackoverflow.com/questions/20141933/debounce-mouse-wheel