Question

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

 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秒的执行时间，并且该时间可用于从数据库中提取数据。我正在寻找最有效的代码。

Answer 1

此功能的最后一个参数：

$("#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)中的数字来更改条件。

Answer 2

只需在此处添加其他任务

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

比在动画之后执行

等到动画结束，直到替换div中的数据

2 个答案: