Javascript 禁用鼠标滚轮直到功能结束

我想建立一个页面滚动。它的工作原理如下：

• 您在

  第1页的
  幻灯片上，向下滚动鼠标

• 您正在（使用

  动画

  ）向下滚动到

  第2页

• 向上/向下滚动时是这样的：））

我的问题是-当我在动画中滚动多次时，它会结巴。我怎样才能防止呢

我的幻灯片代码如下：

function scrollPages() {
        $('section.main').each(function() {
            var prevSection = $(this).prev('section.main'),
                nextSection = $(this).next('section.main'),
                id = $(this).attr('id'),
                scrollFunc = function(dest) {
                $('body, html').stop().animate({
                    scrollTop: dest
                }, 'slow');
            }

            function goUp() {
                if(prevSection.attr('id') != undefined) {
                    var scrollTo = prevSection.offset().top;

                    if(prevSection.attr('id') == 'hi') {
                        $('div.animation').children('div.first').stop().animate({ top: '0' },823);
                        $('div.animation').children('div.secound').stop().animate({ left: '0' },933);
                        $('div.animation').children('div.third').stop().animate({ top: '146px' },559);
                        $('div.animation').children('div.fourth').stop().animate({ top: '30px' },1085);
                        $('div.animation').children('div.fifth').stop().animate({ left: '60px' },860);
                        $('div.animation').children('div.sixth').stop().animate({ top: '30px' },798);
                        $('div.animation').children('div.seventh').stop().animate({ left: '0' },869);
                    }
                    scrollFunc(scrollTo)
                }
            }

            function goDown() {
                if(nextSection.attr('id') != undefined) {
                    var scrollTo = nextSection.offset().top;
                    if(id == 'hi') {
                        $('div.animation').children('div.first').stop().animate({ top: '-999px' },423);
                        $('div.animation').children('div.secound').stop().animate({ left: '-1509px' },533);
                        $('div.animation').children('div.third').stop().animate({ top: '-999px' },359);
                        $('div.animation').children('div.fourth').stop().animate({ top: '-999px' },785);
                        $('div.animation').children('div.fifth').stop().animate({ left: '1999px' },560);
                        $('div.animation').children('div.sixth').stop().animate({ top: '-999px' },498);
                        $('div.animation').children('div.seventh').stop().animate({ left: '-9999px' },569);
                    }

                    scrollFunc(scrollTo);
                }
            }

            $(this).on('mousewheel', function(event, delta) {
                if(delta > 0) {
                    goUp();
                } else {
                    goDown();
                }
            });
        })
    }

---

可能会使用类似于

\uuu.throttle（）

：它需要使用整个

下划线.js

，不是吗？不一定。查看源代码，看看是否可以复制粘贴该函数？（在我看来，这似乎是可能的，它实际上没有任何依赖关系。）或谷歌搜索“javascript节流阀”以查找代码段版本。我尝试使用

debounce

，这是类似的，但仅在几个像素后它才停止滚动：（奇怪。如果我正确理解了你的代码，你想做的是在用户单击滚轮时滚动一页，对吗？也就是说，逐行覆盖滚动。

throttle（）

在这里似乎更合适。这两个函数的工作方式正好相反。

throttle（）

立即调用事件处理程序，然后在一段时间内忽略其他事件。

debounce（）

在一段时间内忽略事件处理程序，然后为最后一个传入的事件调用处理程序。