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

Question

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

它将添加到此代码中：JSFiddle

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

Answer 1

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

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>

另一种方法可以基于：

• 在开始动画之前，将属性设置为正文元素
• 动画结束时删除属性
• 第一步是：测试属性是否存在

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

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>

答案更新

相反，在你的最后一个小提琴中，你混合了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 实例
• 没有动画进行时清空此数组
• 在全局数组中保存补间最大动画
• 根据补间最大动画筛选全局数组

您更新的小提琴在这里