Javascript JQuery-禁用滚轮直到动画完成

我正在尝试禁用mousewheel on mousewheel事件，并仅在操作完成后启用它

$(window).on('DOMMouseScroll mousewheel', function (event) {

    //disable mousewhell until the following animation is complete

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500);

    //enable mousewhell

    return false;
});

我还希望代码忽略第一个滚动之后的每个滚动，直到动画完成。在这种情况下，我希望动画只完成一次，即使用户在鼠标滚轮上滚动一次以上。基本上，在这种情况下，我希望鼠标滚轮在单个鼠标滚动“滴答”后被禁用500毫秒，并且永远不要注册剩余的“滴答”（如果用户在这500毫秒内滚动10滴答，我只想要一个动画，而忽略其余动画）。500毫秒后，我希望再次启用鼠标滚轮

---

我提前向您表示感谢。

我最初确实以重复的形式结束了这个问题，但被告知它只回答了一半的问题。我重新打开它以添加一个建议的解决方案，在动画完成之前不再处理事件

使用中建议的动画

完成

您应该能够执行类似的操作：

var animating = false;

$(window).on('DOMMouseScroll mousewheel', function (event) {
    if(animating){
        return false;
    }

   animating = true;

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500, function(){
        animating = false;
    });
});

---

我本来是把这个问题作为一个重复的问题来结束的，但被告知它只回答了一半的问题。我重新打开它以添加一个建议的解决方案，在动画完成之前不再处理事件

使用中建议的动画

完成

您应该能够执行类似的操作：

var animating = false;

$(window).on('DOMMouseScroll mousewheel', function (event) {
    if(animating){
        return false;
    }

   animating = true;

    $('.box').animate({
        margin: div_offset+'px 0 0 0'
    }, 500, function(){
        animating = false;
    });
});

---

您可以做的是将函数分配给DOM事件，然后在该代码的第一行中分配一个空函数（或“关闭”它）。然后，当动画完成时，只需将函数重新分配给DOM事件。 像这样：

这可以做到这一点，但会让你的JS线程保持忙碌，你也可以这样做：

function test(event) {
        $(window).off('DOMMouseScroll mousewheel');
        //perform your scroll event
        $('.box').animate({
             margin: div_offset+'px 0 0 0'
        }, 500);
        setTimeout(500,function() {$(window).on('DOMMouseScroll mousewheel',test(event));});

    }
    $(window).on('DOMMouseScroll mousewheel',test);

根据Frans的回答：

function test(event) {
            $(window).off('DOMMouseScroll mousewheel');
            //perform your scroll event
            $('.box').animate({
                 margin: div_offset+'px 0 0 0'
            }, 500,function() {$(window).on('DOMMouseScroll mousewheel',test);});

        }
    $(window).on('DOMMouseScroll mousewheel',test);

---

您可以做的是将函数分配给DOM事件，然后在该代码的第一行中分配一个空函数（或“关闭”它）。然后，当动画完成时，只需将函数重新分配给DOM事件。 像这样：

这可以做到这一点，但会让你的JS线程保持忙碌，你也可以这样做：

function test(event) {
        $(window).off('DOMMouseScroll mousewheel');
        //perform your scroll event
        $('.box').animate({
             margin: div_offset+'px 0 0 0'
        }, 500);
        setTimeout(500,function() {$(window).on('DOMMouseScroll mousewheel',test(event));});

    }
    $(window).on('DOMMouseScroll mousewheel',test);

根据Frans的回答：

function test(event) {
            $(window).off('DOMMouseScroll mousewheel');
            //perform your scroll event
            $('.box').animate({
                 margin: div_offset+'px 0 0 0'
            }, 500,function() {$(window).on('DOMMouseScroll mousewheel',test);});

        }
    $(window).on('DOMMouseScroll mousewheel',test);

---

删除页面中的滚动条（确保页面高度与视口高度相同）并在滚动时启动动画怎么样？如果您签出标记的副本，答案使用

complete

，这将允许您设置一个变量，如果在动画期间出现连续滚动，您可以使用该变量提前返回事件。这不是完全重复，因为他还想在自己的活动中禁用滚动/滚轮question@JoelHarkes我只是在评论中补充了这一点。我认为使用

complete

是解决这个问题的主要方法。使用该OP可以使用变量设置“状态”，也可以在完成之前不处理任何进一步的请求。或者甚至在事件开始时分离事件，并在事件完成后重新附加它。我想这是我的首选，但无论哪种方式，

complete

都是我相信的关键。考虑到你的主要问题是不知道如何防止鼠标weel被处理，我将重新打开它，因为它不是按要求在animate上使用complete的副本。删除页面中的滚动条怎么样（确保页面高度与视口高度相同）滚动开始动画？如果你检查标记的重复，答案将使用

complete

，这将允许你设置一个变量，如果在动画期间连续滚动，你可以使用该变量提前返回事件。这不是完全重复，因为他还想在他的任务中禁用滚动/滚轮ion@JoelHarkes我只是在一个评论中补充了这一点。我认为使用

complete

是解决这个问题的主要方法。使用该操作可以使用变量设置“状态”以及在完成之前不要处理任何进一步的请求。甚至在事件开始时分离事件并重新附加完整的请求。我认为如何完成是首选，但我认为无论哪种方式，

完成

都是关键。考虑到您的主要问题是不知道如何阻止处理鼠标weel，我将作为这不是按要求在动画上使用complete的副本。谢谢，你，这很有效。我从未想过忽略鼠标滚轮。谢谢，你，这很有效。我从未想过忽略鼠标滚轮。