函數完成時執行代碼

Question

我的代碼中有一個函數可以動畫幾個元素。我想要做的是執行一系列代碼，但只有在此功能已完成。

例如說我有這樣的：

executeMyAnimationFunction(); 

// Execute this code AFTER executeMyAnimationFunction() has completed 
alert('test'); 

到目前爲止，我已經使用setTimeout的嘗試，但似乎並沒有非常可靠的。我也嘗試使用.promise（），但這似乎並沒有正確執行：

$(executeMyAnimationFunction()).promise().done(function() { 
    alert('test'); 
}); 

但是我承認我錯誤地使用它。在jQuery網站上的the demo上，似乎promise（）被用於正在動畫的元素上。我試圖做這樣的：

$('#myAnimatedElement').promise().done(function() { 
    alert('test'); 
}); 

而且似乎在某些情況下，但別人沒有奏效工作。我想知道這是否是使用promise（）的可靠方法？

基本上我現在卡在我如何做到這一點。我所要做的就是等待一個函數完全執行（該函數簡單地爲一組元素設置動畫），然後繼續執行我的代碼。

有沒有一種簡單的方法來做到這一點使用jquery/JavaScript，我失蹤了？

感謝

編輯：爲了顯示更詳細一點我的問題，這裏是我使用的確切代碼：

<script> 
     $(function() { 

      $(window).bind('hashchange', function (e) { 
       if ($(':animated').length) { 
        return false; 
       } 

       var section = $.param.fragment(); 
       var current = $('#content').children(':visible').attr('id'); 

       $('a').removeClass('active');     

       // If this is the first load of the page, then animate in the initial content 
       if (section === '') {      
        if (current === 'reception') { 
         animateContentIn("reception");       
        } 
        else {       
         $('a[href="#' + section + '"]').addClass('active'); 

         // Animate out existing content 
         animateContentOut(current); 

         setTimeout(function() { 
          animateContentIn("reception"); 
         }, 1000); 
        } 
       } 
       else { 
        // Otherwise find the current page content and animate out 
        animateContentOut(current); 

        setTimeout(function() { 
         animateContentIn(section); 
        }, 1000); 
       }    
      }) 

      // Since the event is only triggered when the hash changes, we need to trigger 
      // the event now, to handle the hash the page may have loaded with. 
      $(window).trigger('hashchange'); 
     });  

     function animateContentIn(activePage) { 
      // Now animate in the new content 
      switch (activePage) { 
       case "floorspace": 
        animateFloorspaceElementsIn(); 
        break; 
       case "reception": 
        animateReceptionElementsIn(); 
        break; 
      } 
     } 

     function animateContentOut(currentPage) { 
      // Now animate in the new content 
      switch (currentPage) { 
       case "floorspace":      
        animateFloorspaceElementsOut(); 
        break; 
       case "reception": 
        animateReceptionElementsOut(); 
        break; 
      } 
     } 

     function animateReceptionElementsIn() { 
      $('#reception').show(); 

      $('#reception .title').animate({ 
       bottom: 520 
      }, 400); 

      $('#reception .tile1').animate({ 
       bottom: 504 
      }, 600); 

      $('#reception .tile2').animate({ 
       bottom: 504 
      }, 700); 

      $('#reception .hero').animate({ 
       bottom: 40 
      }, 1000); 

      $('#reception .content1').animate({ 
       bottom: 8 
      }, 400); 

      $('#reception .content2').animate({ 
       bottom: 8 
      }, 500); 
     } 

     function animateReceptionElementsOut() { 
      $('#reception .title').animate({ 
       bottom: -56 
      }, 400); 

      $('#reception .tile1').animate({ 
       bottom: -136 
      }, 600); 

      $('#reception .tile2').animate({ 
       bottom: -152 
      }, 700); 

      $('#reception .hero').animate({ 
       bottom: -464 
      }, 1000, function() { 
       $('#reception').hide(); 
      }); 

      $('#reception .content1').animate({ 
       bottom: -112 
      }, 400); 

      $('#reception .content2').animate({ 
       bottom: -104 
      }, 500); 
     } 

     function animateFloorspaceElementsIn() { 
      $('#floorspace').show(); 

      $('#floorspace .title').animate({ 
       bottom: 520 
      }, 400); 

      $('#floorspace .tile1').animate({ 
       bottom: 504 
      }, 600); 

      $('#floorspace .tile2').animate({ 
       bottom: 504 
      }, 700); 

      $('#floorspace .hero').animate({ 
       bottom: 40 
      }, 1000); 

      $('#floorspace .content1').animate({ 
       bottom: 8 
      }, 400); 

      $('#floorspace .content2').animate({ 
       bottom: 8 
      }, 500); 
     } 

     function animateFloorspaceElementsOut() { 
      $('#floorspace .title').animate({ 
       bottom: -56 
      }, 400); 

      $('#floorspace .tile1').animate({ 
       bottom: -136 
      }, 600); 

      $('#floorspace .tile2').animate({ 
       bottom: -152 
      }, 700); 

      $('#floorspace .hero').animate({ 
       bottom: -464 
      }, 1000, function() { 
       $('#floorspace').hide(); 
      }); 

      $('#floorspace .content1').animate({ 
       bottom: -112 
      }, 400); 

      $('#floorspace .content2').animate({ 
       bottom: -104 
      }, 500); 
     } 
    </script> 
</head> 
<body> 
    <div id="vert-wrapper"> 
     <div id="wrapper"> 
      <aside id="sidebar"> 
       <nav id="navigation"> 
        <ul> 
         <li><a href="#">Building</a></li> 
         <li><a href="#reception">Reception</a></li> 
         <li><a href="#floorspace">Floor Space</a></li> 
         <li><a href="#">Views</a></li> 
         <li><a href="#">Terraces</a></li> 
         <li><a href="#">Profile</a></li> 
        </ul> 
        <ul> 
         <li><a href="#">Specification</a></li> 
         <li><a href="#">Plans</a></li> 
         <li><a href="#">Location</a></li> 
         <li><a href="#">Ten Storeys</a></li> 
         <li><a href="#">Gallery</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </nav> 
      </aside> 
      <div id="content"> 
       <article id="reception"> 
        <h1 class="title"> 
         <img src="/images/reception/title.png" alt="Edge" /> 
        </h1> 
        <img src="/images/reception/1.jpg" alt="" class="tile1" /> 
        <img src="/images/reception/2.jpg" alt="" class="tile2" /> 
        <img src="/images/reception/hero.jpg" alt="" class="hero" /> 
        <img src="/images/reception/content1.jpg" alt="" class="content1" /> 
        <img src="/images/reception/content2.jpg" alt="" class="content2" /> 
       </article> 
       <article id="floorspace"> 
        <h1 class="title"> 
         <img src="/images/floorspace/title.png" alt="Space" /> 
        </h1> 
        <img src="/images/floorspace/1.jpg" alt="" class="tile1" /> 
        <img src="/images/floorspace/2.jpg" alt="" class="tile2" /> 
        <img src="/images/floorspace/hero.jpg" alt="" class="hero" /> 
        <img src="/images/floorspace/content1.jpg" alt="" class="content1" /> 
        <img src="/images/floorspace/content2.jpg" alt="" class="content2" /> 
       </article> 
      </div>   
     </div> 
    </div> 
</body> 

現在我上面的代碼不工作，但是我不感覺它很乾淨，而且看起來沒有100％的時間正確執行。

基本上我的困境是我想能夠執行animateContentIn（）之後 animateContentOut（）已完成。我設法做到這一點的唯一方法是延遲animateContentIn（）函數達到最長動畫所需的時間 - 在這種情況下，它是1000毫秒。

是不是有更整潔，更有效的寫作方式？

Answer 1

使用回調？

function executeMyAnimationFunction(complete){ 
    $('div').animate({ height: '1px' }, 500, complete); 
} 

這樣稱呼它：

executeMyAnimationFunction(function(){ 
    console.log('animation complete'); 
}); 

或者，如果你堅持使用的承諾上：

executeMyAnimationFunction(){ 
    var dfd = $.deferred(); 

    $('div').animate({ height: '1px' }, 500, function(){ 
     dfd.resolve(); 
    }); 

    return dfd.promise(); 
} 

executeMyAnimationFunction().done(function(){ 
    console.log('animation complete'); 
}); 

Answer 2

function someRandomFunction(){ 
    // This will be executed after myFirstFunction 
} 

function myFirstFunction(callbackFunction){ 
    // Do some stuff 
    alert(1); 
    // Do something slow here 

    // Callback when done: 
    callbackFunction(some, input); 
} 
// Usage: 
myFirstFunction(someRandomFunction); // with existing function 
myFirstFunction(function(){ alert(1);}); // anonymous 

注意：您可以使用匿名函數
小演示：http://jsfiddle.net/zcp82/2/

具有良好的信息的另一個話題：Create a custom callback in JavaScript

Answer 3

請參閱Old Post

這看似重複的問題，如果你調用多個功能，它會按順序調用僅