javascript - 等到动画结束后再替换div内的数据

Question

这个问题已经有答案了:

How to wait for one jquery animation to finish before the next one begins? (6 个回答)

已关闭 1 年前。

我在更改 div 的内容时遇到问题。我想要实现的是等待动画结束，然后更改内容以启动动画以显示新信息。这段代码有时会工作，这意味着有时它会挂起(isWorking 永远不会变成 false，因为动画卡住或动画永远没有时间从 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) 中的数字来更改条件。