jQuery / Javascript函數延遲運行，直到另一個函數完成（如果需要）

Question

因此，我嘗試使用一些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);
}); 

只是解釋一下代碼； ＃portfolio-link，＃resume-link等是我的導航鏈接。 單擊這些按鈕時，我希望它們淡出當前顯示的文本div（＃portfolio，＃resume等），並將其替換為新的div（例如，如果我單擊Portfolio nav鏈接，則希望淡出另一個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);
}); 

UPDATE

最簡單的方法是在所有元素（聯系人，個人資料，簡歷，投資組合）中添加一個類，讓我們將其稱為類div_content然后使用：

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

更新小提琴

Answer 2

fadeOut jQuery函數采用第二個參數，該參數是在完成時運行的函數，因此：

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