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);
        }         
    });

我的问题是，如果我用鼠标滚轮玩几秒钟，它就会开始永远滚动，因为记录的每个 Action 都会作为附加脚本启动排队。

有什么方法可以给脚本添加某种“冷却时间”吗？那么使用一次后，可以在 3 秒内再次使用吗？或者动画完成后？

Answer 1

您可以取消绑定(bind)滚轮事件监听器，然后使用 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);