JavaScript / JQuery-使用后如何暂时禁用功能？

Question

我有一个简单的JS，只要将鼠标滚轮向上或向下移动，它都可以平稳地自动滚动到另一个div。

这是脚本：

    $(document).bind('mousewheel', function(evt) {
        var delta = evt.originalEvent.wheelDelta
        if(delta < 0){
                $('html, body').animate({
                    scrollTop: $("#content-wrapper").offset().top
                }, 3000);
        }
        else {
                $('html, body').animate({
                scrollTop: $("#bgheader").offset().top
                }, 3000);
        }         
    });

我的问题是，如果我用鼠标滚轮播放几秒钟，它将永远在这里和那里滚动，因为记录的每个动作都作为其他脚本启动而排队。

有什么办法可以对脚本进行某种“冷却”？ 这样，在使用一次之后，就可以再次使用它了，比如说3秒钟？ 还是动画制作完成后？

Answer 1

您可以取消绑定wheel事件侦听器，然后在完成后使用jQuery的.animate()回调函数重新附加事件侦听器，如下所示：

function scrollHandler (event) {
    $(document).off("mousewheel.custom");
    var delta = event.originalEvent.wheelDelta
    if(delta < 0){
        $('html, body').animate({
            scrollTop: $("#content-wrapper").offset().top
        }, 3000, function () {
            // animation callback function
            $(document).on("mousewheel.custom", scrollHandler);
        }));
    }
    else {
        $('html, body').animate({
           scrollTop: $("#bgheader").offset().top
        }, 3000, function () {
          // animation callback function
          $(document).on("mousewheel.custom", scrollHandler);
        });
    }
}

// namespace the event so we can easily .off() it
$(document).on('mousewheel.custom', scrollHandler);

Answer 2

我已经使用了超时。

var maxPoll = 3000,
    eventActive = false;

$(document).bind('mousewheel', function(evt) {
    if(eventActive) { 
        return
    } else {
        setTimeout(maxPoll, function() { eventActive = True })
    }
    var delta = evt.originalEvent.wheelDelta
    if(delta < 0){
        $('html, body').animate({
            scrollTop: $("#content-wrapper").offset().top
        }, maxPoll);
    }
    else {
        $('html, body').animate({
            scrollTop: $("#bgheader").offset().top
        }, maxPoll);
    }         
});

这很粗糙，它使用全局变量，但基本上在动画运行时会关闭事件。