等待直到動畫結束，直到替換div內的數據爲止

我無法更改div的內容。我想要實現的是等待動畫結束，然後更改內容以啓動動畫以顯示新信息。這段代碼有時會起作用，這意味着它有時會掛起（isWorking永遠不會變成錯誤的，因爲動畫凍結或動畫從來沒有時間完成循環中的常量循環）。是否有一種方法可以等待動畫結束，然後改變內容？（您在下面看到的方式允許我在動畫正在進行時瀏覽新內容，這爲最終用戶節省了時間。）動畫結束時是否有方法捕捉？等待直到動畫結束，直到替換div內的數據爲止

function DesignResults(InnerHTML) { 
      while(isWorking){ 
      } 
      $("#holder").html(InnerHTML); 
      ShowSearch(true); 
    } 
    var isWorking = false; 
    function ShowSearch(show) { 
      isWorking = true; 
      var outer = $("#outer"); 
      var inner = $("#inner"); 
      var height = 0; 
      if (show == true) 
       height = inner.outerHeight(); 
      var loaderHeight 
      if (height > 0) { 
       loaderHeight = 0; 
      } else { 
       loaderHeight = 31; 
      } 
      outer.animate({ 
       'height': height + "px" 
      }, 1600, function() { 
       $("#loading").animate({ 'height': loaderHeight + "px" }, 900, function() { }); 
       isWorking = false; 
      }); 
    }

我明白$（ELEM）。是（「：動畫」）會給我如果動畫仍然在進步，但仍然凍結一切因同時不斷循環。任何人都可以指向正確的方向嗎？編輯：我想我被誤解了。這是我想要實現的計劃：

開始隱藏動畫。
動畫隱藏時我啓動另一個函數來獲取內容如果我更快地獲取內容，我希望等待動畫結束，然後更改內容並再次顯示該圖層。沒有一個問題在這裏，如果數據需要超過一秒鐘返回

我同意，在動畫完成後，如你所說，我可以做到這一點，但我已經把動畫幾乎1秒執行時間，並且該時間可用於從數據庫中提取數據。我正在尋找最有效的代碼。

來源

2013-07-24 user2227904

使用'.stop（）'（）''像$（「＃加載」）.stop（）。animate（）'所以它不會因爲循環而出錯 – Spokey

@ user2227904我更新了我的答案以解決您的編輯問題。 –

在這個函數的最後一個參數：

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function() { });

是 '完整' 的功能。這個函數在動畫完成時被調用。

所以，你可以做一下這個功能是完成時，像這樣：

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function() { 
    alert('animations complete!'); 
});

---- ----編輯

根據您的編輯，你可能想做這樣的事情。

有一個變量，可以讓你知道當兩者都完成：
```
var signal = 0; 
```

具有這樣的功能改變與此內容在裏面：

function changeContent() { 
    signal++; 
    if (signal === 2) { 
     // change the content code here 
     signal = 0; 
    } 
}

當動畫完成後，致電：
```
changeContent(); 
```
當你抓住的數據，請致電：
```
changeContent(); 
```

當changeContent()被稱爲第一時間無論是功能，它會增加signal 1和退出功能。然後第二次，它會將signal增加爲2.由於signal === 2，您知道動畫和抓取數據都已完成，因此您現在可以更改您的內容。

關於使用整數來做到這一點的好處是，如果你想在改變你的內容之前完成3,4,5+個函數的完成工作。在這種情況下，您只需要通過增加if (signal === 2)中的數字來更改條件。

來源

2013-07-24 14:16:42

我用setInterval（）找到了一個解決方法每0.5秒它啓動內容的變化，如果isWorking = True它跳過數據的變化，如果它是假的，它會更改並啓動動畫以顯示新數據並清除間隔。 – user2227904

這與自旋鎖的基本原理相同。這也會起作用。效率不高，但低效率完全可以忽略不計。你可以將'setInterval'降到0.1秒，以使它響應一些。 –

只需添加在這裏

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function() { /* Change Content */ });

附加任務那將是比以前`.animation動畫後執行

來源

2013-07-24 14:17:07

等待直到動畫結束，直到替換div內的數據爲止

回答

相關問題