section scrolling using mousewheel

Question

I'm using the mousewheel plugin to scroll sections of my page.

What I should look into for disabling the function I wrote until the animation has fully completed?

I am running stop() but that only cancels out the animation.

$('section').mousewheel(function(event, delta, deltaX, deltaY) {

$('section' ).waypoint(function(direction){
    thisID = $(this); 
},{ offset: '25%' });

if (delta > 0) {
    console.log('up');
    if ($(this).not(":first-child")) { 
        //$(this).animate(function(){
        $('html, body').stop().animate({
            scrollTop: thisID.prev().offset().top
        }, 1000);
            //});
    }else {
        $('html, body').stop().animate({
            scrollTop: thisID.offset().top
        }, 1000);
    }
    }
else if (delta < 0) {

    if ($(this).not(":first-child")) { 
        $('html, body').stop().animate({
            scrollTop: thisID.next().offset().top
        }, 1000);
    }
    else {
        $('html, body').stop().animate({
            scrollTop: thisID.offset().top
        }, 1000);
    }

    console.log('down');
}
return false; // prevent default
});

Answer 1

One way to do this would be to create a "stoplight" variable. Set it to False at the beginning of your function, and then re-set it to True at the end of the animation using the complete argument of the animate() function. Then make the main function only run if this variable is True.

Answer 2

Instead of reinventing the wheel you might want to take a look at things such as fullPage.js.

It will save you from many headaches when you start dealing with touch devices, touch screens, old browsers, kinetic scrolling present in trackpads or Apple laptops...