Mousewheel scroll fire only once next callback

Question

I have Owl carousel setup like this

<div class="owl-carousel">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

this is the js

var owl = $('.owl-carousel');
owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY<0) {
        console.log(e.deltaY);
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

jsFiddle here: http://jsfiddle.net/f0yph3aL/

as you can see if you scroll your mousewheel over the red square, the slides are moving like crazy. I need to have the next.owl.carousel fire only once so by mousewheel scroll it changes only +1 slide.

I have tried setTimeout inside the owl.on, tried debounce and bind/unbind mousewheel. Maybe I did it wrong. Thanks for any advice.

UPDATE:

Here is unbinded mousewheel, which works great but I don't know ho to bind mousewheel back on after some timeout (setTimeout) http://jsfiddle.net/cz122kk6/1/

Answer 1

You can set the flag for transitions and change it in time transition starts/ends. Here is the script code:

$('.owl-carousel').each(function(i) {
    var owl = $(this);
    owl.owlCarousel({
        items: 1,
        singleItem: true,
        rewindNav: false,
        dots: true,
    });
    var allowTransitionLeft = false;
    var allowTransitionRight = true;
    owl.on('mousewheel', '.owl-stage', function (e) {
        e.preventDefault();
        if (e.deltaY < 0) {
            if( allowTransitionRight ) {
                allowTransitionRight = false;
                owl.trigger('next.owl');
            };
        } else {
            if (allowTransitionLeft) {
                allowTransitionLeft = false;
                owl.trigger('prev.owl');
            };
        }
    }).on('translated.owl.carousel', function (e) {
        allowTransitionRight = (e.item.count > e.item.index );
        allowTransitionLeft = (e.item.index > 0);
    });
});

You can see it in Updated Fiddle.

When slide transition ends translated.owl.carousel event is fired. There we chose which transition is allowed based on Carousel's active item index.

The list of Owl Carousel 2 events here.

EDIT: Now works for multiple instances.

Answer 2

owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
    loop: true,
    smartSpeed: 1000,
});

Done :)