启动后禁用功能一段时间等待动画完成

Question

我有一个用鼠标滚轮事件调用的函数，它启动一个动画，如果在动画完成之前多次播放它可能会被误解。我尝试使用 setTimeout 或 setInterval，但两者都在内存中保留了事件的数量（并严重重复了我的动画）。目标是能够立即调用我的函数并等待大约 2 秒才能再次触发事件。

将添加到此代码中：JSFiddle

var scroll = 0;
$('body').bind('mousewheel', function(e) {
  if (scroll < 8) scroll++;
  else {
    scroll = 0;

  // My code...

}
});

Answer 1

您可以使用 :animated 选择器来测试之前的动画是否已经在进行中：

if ($(':animated').length > 0) {
    console.log('animation stopped because already in progress....');
    return;
}

$('body').on('mousewheel', function (e) {
    if ($(':animated').length > 0) {
        console.log('animation stopped because already in progress....');
        return;
    }
    if ($('.ecampus').css('display') == 'block') {

        if (e.originalEvent.wheelDelta < 0) {

            $('.ecampus').fadeOut();
            $('.pegasebuzz').fadeIn();
        } else {
            // TOP PAGE
        }
        return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('.pegasebuzz').fadeOut();
            $('.notrecoin').fadeIn();
        } else {
            $('.pegasebuzz').fadeOut();
            $('.ecampus').fadeIn();
        }
        return;
    }

    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {

            $('.notrecoin').fadeOut();
            $('.pegasebuzz').fadeIn();
        }
        return;
    }
});

body {
    margin: 0;
}

.ecampus {
    width: 100%;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
}

.pegasebuzz {
    width: 100%;
    height: 100%;
    background: blue;
    display: none;
    position: absolute;
}

.notrecoin {
    width: 100%;
    height: 100%;
    background: yellow;
    display: none;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ecampus">
    E-CAMPUS
    <br/>(Scroll down)
</div>
<div class="pegasebuzz">
    PEGASEBUZZ
</div>
<div class="notrecoin">
    NOTRE COIN
</div>

另一种方法可以基于：

在开始动画之前为 body 元素设置一个属性
当动画结束时移除属性
第一步是：测试属性是否存在

但是这种方法意味着您需要动画流程。在您的情况下，您有一个并发的淡出和淡入序列。我建议您使用以下代码段中的完整方法。

if ($('body').data('animationinprogress') !== undefined) {

     console.log('animation stopped because already in progress....');

     return;
  }

$('body').on('mousewheel', function (e) {
    if ($('body').data('animationinprogress') !== undefined) {
        console.log('animation stopped because already in progress....');
        return;
    }
    if ($(':animated').length > 0) {
        console.log('animation stopped because already in progress....');
        return;
    }
    if ($('.ecampus').css('display') == 'block') {

        if (e.originalEvent.wheelDelta < 0) {

            $('body').data('animationinprogress', true);
            $('.ecampus').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });
        } else {
            // TOP PAGE
        }
        return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('body').data('animationinprogress', true);
            $('.pegasebuzz').fadeOut(400, function() {
                $('.notrecoin').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });
        } else {
            $('body').data('animationinprogress', true);
            $('.pegasebuzz').fadeOut(400, function() {
                $('.ecampus').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });

        }
        return;
    }

    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {
            $('body').data('animationinprogress', true);
            $('.notrecoin').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    $('body').removeData('animationinprogress');
                });
            });

        }
        return;
    }
});

body {
    margin: 0;
}

.ecampus {
    width: 100%;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
}

.pegasebuzz {
    width: 100%;
    height: 100%;
    background: blue;
    display: none;
    position: absolute;
}

.notrecoin {
    width: 100%;
    height: 100%;
    background: yellow;
    display: none;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ecampus">
    E-CAMPUS
    <br/>(Scroll down)
</div>
<div class="pegasebuzz">
    PEGASEBUZZ
</div>
<div class="notrecoin">
    NOTRE COIN
</div>

另一种可能性是在具有名称的外部函数中定义您的处理程序单击处理程序逻辑。例如，使用之前的技术，而不是定义一个属性，您可以使用 .on() / .off() 方法来启用/禁用事件处理程序：

// disable mousewheel
$('body').off('mousewheel');
.......
// enable mousewheel
$('body').on('mousewheel',mousewheelHandler);

function mousewheelHandler(e) {
    if ($('.ecampus').css('display') == 'block') {

        if (e.originalEvent.wheelDelta < 0) {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.ecampus').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });
        } else {
            // TOP PAGE
        }
        return;
    }

    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.pegasebuzz').fadeOut(400, function() {
                $('.notrecoin').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });
        } else {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.ecampus').fadeOut(400, function() {
                $('.notrecoin').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });
        }
        return;
    }

    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {
            // disable mousewheel
            $('body').off('mousewheel');
            $('.notrecoin').fadeOut(400, function() {
                $('.pegasebuzz').fadeIn(400, function() {
                    // enable mousewheel
                    $('body').on('mousewheel',mousewheelHandler);
                });
            });

        }
        return;
    }
}

$('body').on('mousewheel',mousewheelHandler);

body {
    margin: 0;
}

.ecampus {
    width: 100%;
    height: 100%;
    background: red;
    display: block;
    position: absolute;
}

.pegasebuzz {
    width: 100%;
    height: 100%;
    background: blue;
    display: none;
    position: absolute;
}

.notrecoin {
    width: 100%;
    height: 100%;
    background: yellow;
    display: none;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="ecampus">
    E-CAMPUS
    <br/>(Scroll down)
</div>
<div class="pegasebuzz">
    PEGASEBUZZ
</div>
<div class="notrecoin">
    NOTRE COIN
</div>

答案更新

在你的最后一个 fiddle 中，你正在混合 TweenMax 和 jQuery 动画因此，你需要一个混合测试：

第一个检查 TweenMax 是否有正在进行的活动动画
正在进行的第二个 jQuery 动画

if (tweenActiveAnimatoins.length > 0 || $(':animated').length > 0) {
```
console.log('animation stopped because already in progress....');

return;
```
}

var tweenVars = [];
$(window).on('wheel', function (e) {
    var tween;
    var tweenActiveAnimatoins = tweenVars.filter(function(ele, idx) {
        return ele.isActive();
    });
    if (tweenActiveAnimatoins.length > 0 || $(':animated').length > 0) {
        console.log('animation stopped because already in progress....');
        return;
    }
    //
    // empty the array
    //
    tweenVars = [];
    if ($('.ecampus').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('.ecampus').fadeOut();
            $('.pegasebuzz').fadeIn();
            tween = TweenLite.from($('.pegasebuzz .corner-title'), 0.5, {
                opacity: 0,
                delay: 0.2
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .text-project'), 1, {
                opacity: 0,
                marginTop: '15px',
                delay: 0.7
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .bottom-left img'), 1.5, {
                opacity: 0,
                marginTop: "-95px",
                marginLeft: "40px",
                delay: 1
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .top-right img'), 1, {
                opacity: 0,
                marginTop: "60px",
                delay: 1.3
            });
            tweenVars.push(tween);
        } else {
            // TOP PAGE
        }
        return;
    }
    if ($('.pegasebuzz').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            $('.pegasebuzz').fadeOut();
            $('.notrecoin').fadeIn();
            tween = TweenLite.from($('.notrecoin .corner-title'), 0.5, {
                opacity: 0,
                delay: 0.5
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.notrecoin .text-project'), 1, {
                opacity: 0,
                marginTop: '15px',
                delay: 1
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.notrecoin .top-right img'), 1, {
                opacity: 0,
                marginTop: "60px",
                delay: 2
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.notrecoin .bottom-left img'), 1.5, {
                opacity: 0,
                marginTop: "-95px",
                marginLeft: "40px"
            });
            tweenVars.push(tween);
        } else {
            $('.pegasebuzz').fadeOut();
            $('.ecampus').fadeIn();
        }
        return;
    }
    if ($('.notrecoin').css('display') == 'block') {
        if (e.originalEvent.wheelDelta < 0) {
            // BOTTOM PAGE
        } else {

            $('.notrecoin').fadeOut();
            $('.pegasebuzz').fadeIn();
            tween = TweenLite.from($('.pegasebuzz .corner-title'), 0.5, {
                opacity: 0,
                delay: 0.5
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .text-project'), 1, {
                opacity: 0,
                marginTop: '15px',
                delay: 1
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .top-right img'), 1, {
                opacity: 0,
                marginTop: "60px",
                delay: 2
            });
            tweenVars.push(tween);
            tween = TweenLite.from($('.pegasebuzz .bottom-left img'), 1.5, {
                opacity: 0,
                marginTop: "-95px",
                marginLeft: "40px",
                delay: 1.5
            });
            tweenVars.push(tween);
        }
        return;
    }
});

body {
    background: #141415;
    margin: 0;
    padding: 0;
    overflow: auto;
    font-family: 'Montserrat';
}

#fullPage {
    /*    box-shadow: inset 0px 0px 200px 100px rgba(0, 0, 0, 0.1);*/
    width: 100vw;
    height: 100vh;
    outline: 17px solid;
    outline-offset: -40px;
    position: fixed;
}

.gridPage {
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    padding: 40px;
    position: relative;
}

.strokeGrid {
    stroke-width: 17;
    stroke: #0c0c0d;
}

.wrapper {
    width: calc(100vw - 80px);
    height: calc(100vh - 80px);
    padding: 40px;
}

.top-left {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

.top-right {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    margin-left: 13px;
    display: inline-block;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

.bottom-left {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    margin-top: 18px;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

.bottom-right {
    width: calc(50% - 9px);
    height: calc(50% - 9px);
    display: inline-block;
    margin-top: 18px;
    margin-left: 13px;
    vertical-align: top;
    /*    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 255, 0.2);*/
}

/* NAVIGATION */

nav {
    top: 85px;
    right: 0;
    position: absolute;
}

/* PEGASEBUZZ */
.pegasebuzz {
    position: fixed;
    display: none;
}

.pegasebuzz .corner-title {
    font-weight: 200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}

.pegasebuzz .corner-title span {
    color: #595959;
}

.pegasebuzz .text-project {
    width: 65%;
    min-width: 370px;
    font-weight: 200;
    font-size: 10pt;
    color: #b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
    position: relative;
}

.pegasebuzz .bottom-left img {
    max-height: 60vh;
    margin-top: -13vh;
    z-index: 40;
    position: absolute;
}

.pegasebuzz .top-right img {
    max-width: 60vw;
    height: auto;
    width: auto;
    max-height: 75vh;
    top: 8vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

/* NOTRE COIN */
.notrecoin {
    position: fixed;
    display: none;
}

.notrecoin .corner-title {
    font-weight: 200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}

.notrecoin .corner-title span {
    color: #595959;
}

.notrecoin .text-project {
    width: 65%;
    min-width: 370px;
    font-weight: 200;
    font-size: 10pt;
    color: #b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
    position: relative;
}

.notrecoin .bottom-left img {
    max-width: 70vw;
    max-height: 65vh;
    bottom: 4%;
    position: absolute;
    z-index: 40;
}

.notrecoin .top-right img {
    max-width: 60vw;
    height: auto;
    width: auto;
    max-height: 75vh;
    top: 8vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

/* E-CAMPUS */
.ecampus {
    position: fixed;
    display: block;
}

.ecampus .corner-title {
    font-weight: 200;
    font-size: 12pt;
    color: #2548f9;
    margin: 50px 50px 0 50px;
    position: absolute;
}

.ecampus .corner-title span {
    color: #595959;
}

.ecampus .text-project {
    width: 65%;
    min-width: 370px;
    font-weight: 200;
    font-size: 10pt;
    color: #b1b1b1;
    line-height: 15pt;
    padding: 120px 50px 50px 50px;
    position: relative;
}

.ecampus .bottom-left img {
    max-width: 70vw;
    max-height: 65vh;
    bottom: 4%;
    position: absolute;
    z-index: 40;
}

.ecampus .top-right img {
    max-width: 60vw;
    height: auto;
    width: auto;
    max-height: 75vh;
    top: 8vh;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js"></script>

<div id="fullPage">
    <svg class="gridPage" preserveAspectRatio="none">
        <line x1="0" y1="50%" x2="100%" y2="50%" class="strokeGrid"/>
        <line x1="50%" y1="100%" x2="50%" y2="0" class="strokeGrid"/>
    </svg>
</div>

<div class="wrapper ecampus">
    <div class="top-left">

        <div class="corner-title">E-CAMPUS<span>.01</span></div>
        <div class="text-project">
            Sed mollis vestibulum aliquam. Morbi a sapien blandit, ornare ante in, hendrerit augue. Fusce euismod lacus
            a tempor mollis. Vestibulum posuere quam tellus, eleifend auctor mauris viverra at. Sed sapien justo,
            tincidunt in ullamcorper at, suscipit sed nunc. Vivamus nibh lectus, molestie sed lacus ut, tempus ultricies
            magna <br/><br/>
            Nam cursus tortor ut accumsan interdum. Integer sed lacinia tellus. Mauris dolor libero, aliquam vulputate
            tortor ac, finibus ultricies enim. <br/><br/>

        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li>
                    <a class="open-ecampus"><span class="active">01</span></a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz">02</a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin">03</a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div class="bottom-left">
    </div>
    <div class="bottom-right"></div>
</div>

<div class="wrapper pegasebuzz">
    <div class="top-left">

        <div class="corner-title">PEGASEBUZZ<span>.02</span></div>
        <div class="text-project">
            PegaseBuzz is an application about horses, it was very important to visualize and design something which is
            interactive. <br/><br/>
            Créons un support qui vous ressemble, en vous apportant une présence en ligne, juste et pertinente, et
            surfez sur les vagues du web avec grâce et aisance. <br/><br/>
            Nous imaginons, pour vous, des supports visuels et interactifs, sur le web, en papier, vidéo ou encore en
            réalité virtuelle.
        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li class="open-ecampus">
                    <a class="open-ecampus">01</a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz"><span class="active">02</span></a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin">03</a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">

    </div>
    <div class="bottom-left">
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">
    </div>
    <div class="bottom-right"></div>
</div>

<div class="wrapper notrecoin">
    <div class="top-left">

        <div class="corner-title">NOTRE COIN<span>.03</span></div>
        <div class="text-project">
            Sed mollis vestibulum aliquam. Morbi a sapien blandit, ornare ante in, hendrerit augue. Fusce euismod lacus
            a tempor mollis. Vestibulum posuere quam tellus, eleifend auctor mauris viverra at. Sed sapien justo,
            tincidunt in ullamcorper at, suscipit sed nunc. Vivamus nibh lectus, molestie sed lacus ut, tempus ultricies
            magna <br/><br/>
            Nam cursus tortor ut accumsan interdum. Integer sed lacinia tellus. Mauris dolor libero, aliquam vulputate
            tortor ac, finibus ultricies enim. <br/><br/>

        </div>
    </div>
    <div class="top-right">
        <nav>
            <ul class="cf">
                <li>
                    <a class="open-ecampus">01</a>
                    <ul class="dropdown">
                        <li><a class="open-ecampus">E-CAMPUS</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-pegasebuzz">02</a>
                    <ul class="dropdown">
                        <li><a class="open-pegasebuzz">PEGASEZBUZZ</a></li>
                    </ul>
                </li>
                <li>
                    <a class="open-notrecoin"><span class="active">03</span></a>
                    <ul class="dropdown">
                        <li><a class="open-notrecoin">NOTRE COIN</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">

    </div>
    <div class="bottom-left">
        <img src="https://dummyimage.com/200x200/0011ff/0e0f00">
    </div>
    <div class="bottom-right"></div>
</div>

如您在前面的代码片段中所见，您的代码存在一些差异：

使用滚轮事件而不是鼠标滚轮，因为已弃用
声明一个全局变量，用于保存所有 TweenMax 实例
没有动画进行时清空这个数组
在全局数组中保存一个TweenMax动画
根据 TweenMax 动画过滤全局数组

你的更新 fiddle here

启动后禁用功能一段时间等待动画完成

Disable function for a period of time after its launched to wait animation to complete

jquery

timeout

delay

intervals

pause