отключить прокрутки после каждого события колеса прокрутки

Question

я сделал функцию, приращение класса в списке Ли, есть мой код:

var scrollable = $('ul li').length - 1, 
 
    count = 0; 
 
$('body').bind('mousewheel', function(e) { 
 
    if (e.originalEvent.wheelDelta/120 > 0) { 
 
    if (scrollable >= count && count > 0) { 
 
     $('.active').removeClass('active').prev().addClass('active'); 
 
     count-- 
 
    } else { 
 
     return false; 
 
    } 
 
    } else { 
 
    if (scrollable > count) { 
 
     $('.active').removeClass('active').next().addClass('active'); 
 
     count++ 
 
    } else { 
 
     return false; 
 
    } 
 

 
    } 
 
})

body{ 
 
    overflow:hidden; 
 
    } 
 

 
ul li { 
 
    height: 20px; 
 
    width: 20px; 
 
    background: blue; 
 
    margin: 5px; 
 
    list-style: none 
 
} 
 
ul li.active { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="active"></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Но я хочу, чтобы зафиксировать свиток на 1 вторых между каждым переходом класса, как я могу его исправить?

Answer 1

Создать флаг и использовать SetTimeout для одной второй

var scrollable = $('ul li').length - 1, 
    count = 0, 
    allowTransition = true; 
$('body').bind('mousewheel', function(e) { 

    if (allowTransition) { 
    allowTransition=false; 
    if (e.originalEvent.wheelDelta/120 > 0) { 
     if (scrollable >= count && count > 0) { 
     $('.active').removeClass('active').prev().addClass('active'); 
     count-- 
     } else { 
     return false; 
     } 
    } else { 
     if (scrollable > count) { 
     $('.active').removeClass('active').next().addClass('active'); 
     count++ 
     } else { 
     return false; 
     } 

    } 
    setTimeout(function() { 
     allowTransition=true; 
    }, 1000); 
    } 
})