JQuery - 禁用滚轮直到动画完成

Question

I am trying to disable mousewheel on mousewheel event and only enable it after the action is completed.

$(window).on('DOMMouseScroll mousewheel', function (event) {

    //disable mousewhell until the following animation is complete

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500);

    //enable mousewhell

    return false;
});

I would also like the code to ignore every scroll after the first one, until the animation is complete. In this particular case, I want the animation to complete only once, even if the user scrolls for more than one tick on mouse wheel. Basically in this case, I want the mouse wheel to be disabled for 500 milliseconds after a single mouse scroll "tick", and not register the remaining "ticks" ever (if the user scrolls for 10 ticks during these 500 milliseconds, I only want one animation, while the rest are ignored). After 500 milliseconds, I want the mousewheel to be enabled once again.

I thank you in advance.

Answer 1

I did originally close this question as a duplicate but was told it only answer half the question. I re-openend it to add a suggested solution for not processing the event again until the animation is done.

Using animate complete as suggested in this SO post

You should be able to do something similar to this:

var animating = false;

$(window).on('DOMMouseScroll mousewheel', function (event) {
    if(animating){
        return false;
    }

   animating = true;

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500, function(){
        animating = false;
    });
});

Answer 2

What you can do is assign the function to the DOM event and then assign an empty function (or 'off' it) in the first line of that code. Then when the animation is complete just re-assign the function to the DOM event. Like so:

function test(event) {
    $(window).off('DOMMouseScroll mousewheel');
    //perform your scroll event
    $('.box').animate({
         margin: div_offset+'px 0 0 0'
    }, 500);
    sleep(500);
    $(window).on('DOMMouseScroll mousewheel',test);
}
$(window).on('DOMMouseScroll mousewheel',test);

This will do the trick but it will hold your JS thread busy, you could also do:

function test(event) {
        $(window).off('DOMMouseScroll mousewheel');
        //perform your scroll event
        $('.box').animate({
             margin: div_offset+'px 0 0 0'
        }, 500);
        setTimeout(500,function() {$(window).on('DOMMouseScroll mousewheel',test(event));});

    }
    $(window).on('DOMMouseScroll mousewheel',test);

And based on Frans answer:

function test(event) {
            $(window).off('DOMMouseScroll mousewheel');
            //perform your scroll event
            $('.box').animate({
                 margin: div_offset+'px 0 0 0'
            }, 500,function() {$(window).on('DOMMouseScroll mousewheel',test);});

        }
    $(window).on('DOMMouseScroll mousewheel',test);