javascript - jQuery/Javascript 函数延迟运行，直到另一个函数完成(如果需要)

Question

所以我尝试使用一些 JavaScript 来为一些文本 div 做一些简单的淡入/淡出动画。虽然我确信可能有更好的方法来编写我的函数，但它们目前确实可以工作，但有一个我想修复的小问题，但不确定最好的方法。

$('#portfolio-link').click(function(){
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#portfolio" ).fadeIn(500);},500);
}); 

$('#resume-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#resume" ).fadeIn(500);},500);
}); 

$('#profile-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#resume" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#profile" ).fadeIn(500);},500);
}); 

$('#contact-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   setTimeout(function(){$( "#contact" ).fadeIn(500);},500);
}); 

只是稍微解释一下代码； #portfolio-link、#resume-link 等是我的导航链接。当这些被单击时，我希望它们淡出当前显示的文本 div(#portfolio、#resume 等)并将其替换为新的 div(例如，如果我单击投资组合导航链接，我想淡出其他内容) 3 并淡入作品集文本 div)。

我遇到的问题是，如果您太快单击导航链接，有时会显示多个 div，因为其他功能在新功能开始之前尚未完成，所以我只是想知道解决此问题的最佳方法是什么会的。

也许在函数开始时将某种变量的值设置为 1，在函数结束时将其设置为 0，然后在允许新函数开始之前检查该值是否为 0？如果这是一个好方法，它会在功能之间产生滞后(留下大量延迟褪色的可能性)还是只是在点击时不执行任何操作？

任何关于这方面的帮助都是值得赞赏的，因为我充其量只是 javascript/jquery 的新手。

谢谢

Answer 1

您应该使用 .finish() jquery 函数，它相当于 .stop(true,true)。这将确保对象上的所有先前动画都已完成并且处于最终位置。我将向您展示其中一个元素的代码，这将适用于所有其他元素。

$('#portfolio-link').click(function(){
   $( "#resume" ).finish().fadeOut(500);
   $( "#profile" ).finish().fadeOut(500);
   $( "#contact" ).finish().fadeOut(500);
   setTimeout(function(){$( "#portfolio" ).fadeIn(500);},500);
}); 

更新

实现这一点的最简单方法是向所有元素(联系人、个人资料、简历、作品集)添加一个类，我们将其称为 div_content 类，然后使用:

$('#portfolio-link').click(function(){
   $( ".div_content" ).finish().fadeOut(500).promise().done(function(){$("#portfolio").fadeIn(500)});
}); 

Updated fiddle