Javascript 鼠标滚轮事件触发太频繁/多个滚动会中断动画

我编写了一个小函数，以便我的页面能够很好地滚动到下一个div

滚动看起来很有效，但只要用户只使用鼠标滚轮滚动一个步骤，一旦滚轮“滚动”的频率比“滚动”的频率高，下一个div就不再有效/全部中断。我摆好了一把小提琴来演示这种行为：

javascript代码如下所示：

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

     $('#start').bind(mousewheelevt, function(e){

     var evt = window.event || e ;
     evt = evt.originalEvent ? evt.originalEvent : evt;
     var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
     {


     $('html, body').animate({
     scrollTop: $('#hotels').offset().top
     }, 2000);

     }
     });

     var mousewheelevt1 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

     $('#hotels').bind(mousewheelevt1, function(e){

     var evt = window.event || e ;
     evt = evt.originalEvent ? evt.originalEvent : evt;
     var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
     {
     $('html, body').animate({
     scrollTop: $('#training').offset().top
     }, 2000);

     }
     else {
     $('html, body').animate({
     scrollTop: $('#start').offset().top
     }, 2000);

     }
     });
   var mousewheelevt2 = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" ;

     $('#training').bind(mousewheelevt2, function(e){

     var evt = window.event || e ;
     evt = evt.originalEvent ? evt.originalEvent : evt;
     var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;

     if(delta < 0)
     {


     }
     else {
     $('html, body').animate({
     scrollTop: $('#hotels').offset().top
     }, 2000);

     }
     });

var mouseweelevt=（/Firefox/i.test（navigator.userAgent））？“鼠标滚轮”：“鼠标滚轮”；
$（'#start'）.bind（mouseweellevt，函数（e）{
var evt=window.event | | e；
evt=evt.originalEvent？evt.originalEvent:evt；
var delta=evt.细节？evt.细节*（-40）：evt.细节；
if（δ<0）
{
$（'html，body'）。设置动画({
scrollTop:$（'#hotels'）.offset（）.top
}, 2000);
}
});
var mouseweelevt1=（/Firefox/i.test（navigator.userAgent））？“鼠标滚轮”：“鼠标滚轮”；
$（“#hotels”）.bind（mouseweellevt1，函数（e）{
var evt=window.event | | e；
evt=evt.originalEvent？evt.originalEvent:evt；
var delta=evt.细节？evt.细节*（-40）：evt.细节；
if（δ<0）
{
$（'html，body'）。设置动画({
scrollTop:$（'#training'）.offset（）.top
}, 2000);
}
否则{
$（'html，body'）。设置动画({
scrollTop:$（“#开始”）.offset（）.top
}, 2000);
}
});
var mouseweelevt2=（/Firefox/i.test（navigator.userAgent））？“鼠标滚轮”：“鼠标滚轮”；
$（'#training'）.bind（mouseweellevt2，函数（e）{
var evt=window.event | | e；
evt=evt.originalEvent？evt.originalEvent:evt；
var delta=evt.细节？evt.细节*（-40）：evt.细节；
if（δ<0）
{
}
否则{
$（'html，body'）。设置动画({
scrollTop:$（'#hotels'）.offset（）.top
}, 2000);
}
});

有没有办法在第一个事件触发后禁用鼠标滚轮，或者您对如何解决此问题有其他想法？

.stop（）.animate（）

---

如果要消除闪烁，还应使用

e.preventDefault（）

禁用默认鼠标滚轮事件。

在调用滚动事件之前，应使用一个标志，并使用一个值为true的变量，当调用scroll事件时，将变量设置为false，当然，确保仅当变量设置为true时才执行scroll事件，动画完成后，将变量设置回true。希望能有所帮助。

谢谢，这几乎正是我一直在寻找的。但是现在，如果我滚动不止一次，它会稍微“震动”内容，有没有办法摆脱它？这就是我所说的闪烁汉克斯，我应该在开始对第一部分感到高兴之前阅读整个答案…：）