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

jQuery/Javascript Function delays running until another function finishes (if needed)

本文关键字：函数 如果 另一个 Javascript 延迟 运行 jQuery      更新时间：2023-09-26

所以我试图使用一些javascript来做一些文本div的简单fadeIn/fadeOut动画。虽然我确信可能有更好的方法来编写我的函数，但它们目前确实有效，但有一个小问题我想解决，而且不确定最佳方法。

$('#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);
});

只是为了稍微解释一下代码；#公文包链接、#简历链接等都是我的导航链接。当单击这些时，我希望它们淡出当前显示的文本div（#portfolio、#resume等），并用新的div替换它（例如，如果我单击portfolio导航链接，我希望淡出其他3个，并淡出porfolio文本div）。

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

也许在函数开始时将某种变量设置为1，在函数结束时设置为0，然后在允许新函数开始之前检查该值是否为0？如果这是一个好方法，它会在函数之间产生滞后（留下大量延迟衰落的可能性），还是只是在点击时什么都不做？

感谢您在这方面的任何帮助，因为我充其量只是javascript/jquery的新手。

感谢

您应该使用.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);
});

更新

实现这一点的最简单方法是向所有元素（联系人、档案、简历、公文包）添加一个类，我们称之为classdiv_content，然后使用：

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

更新的fiddle

fadeOut jquery函数接受第二个参数，该参数是要在完成时运行的函数，因此：

   $('#portfolio-link').click(function(){
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500, function() {
       $( "#portfolio" ).fadeIn(500)
   });
相关文章：