等到动画结束，直到替换 div 内的数据 [重复]

Question

我无法更改 div 的内容。我想要实现的是等待动画结束，然后更改内容以启动动画以显示新信息。这段代码不时工作，这意味着有时它会挂起（isWorking 永远不会变为假，因为动画冻结或动画永远没有时间从 while 内的不断循环中完成。）有没有办法等待动画结束和然后改变内容？ （您在下面看到的方式允许我在动画进行时浏览新内容，这为最终用户节省了时间。）有没有办法捕捉动画何时结束？

 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).is(':animated') 会告诉我，但由于 while 的不断循环，它仍然会冻结所有内容。谁能指出我正确的方向？

编辑： 我想我被误解了。这是我想要实现的计划：

1. 开始隐藏动画。
2. 当动画隐藏时，我正在启动另一个函数来获取内容 如果我更快地获得内容，我希望等待动画结束然后更改内容并再次显示图层。 如果数据需要超过一秒的时间才能返回，这里没有问题

---

我同意我可以按照您的建议在动画完成后执行此操作，但我已将动画设置为将近 1 秒的执行时间，并且该时间可用于从数据库中提取数据。我正在寻找最有效的代码。

Answer 1

这个函数的最后一个参数：

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

是“完整”的功能。动画完成时调用此函数。

所以，当它完成时，你可以在这个函数中做一些事情，就像这样：

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

----编辑----

根据您的编辑，您可能想要做这样的事情。

1. 有一个变量可以让您知道两者何时完成：

   var signal = 0;
   

2. 具有更改内容的功能：

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

3. 动画完成后，调用：

   changeContent();
   

4. 获取数据后，调用：

   changeContent();
   

当changeContent()被任一函数第一次调用时，它会将signal递增到1并退出函数。然后在第二次，它将signal 增加到 2。由于signal === 2，您知道动画和抓取数据都已完成，因此您现在可以更改内容。

使用整数执行此操作的好处是，如果您希望在更改内容之前让 3、4、5+ 个函数完成工作。在这种情况下，您只需通过增加 if (signal === 2) 中的数字来更改条件。

Answer 2

只需在此处添加附加任务

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

比动画结束后执行