如何在执行函数之前等待jquery效果循环完成

Question

编辑：这里接受的答案：如何让 jQuery 等待效果完成？没有解决我的问题，因为回调函数是在jquery ui效果完成之前执行的。此线程上还有另一个答案是指 promise() 但这只是答案的一部分，并且缺少很多信息。

我试图等到 jquery 效果循环完全完成动画，直到执行回调函数。

然而似乎回调函数是在最后一个 jquery 效果启动后立即执行的，而不是等待动画完成。

我想知道如何对循环中的所有元素使用 jquery 放置效果来等待元素被隐藏，并且只有在元素完全隐藏后，回调函数才会运行。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
    <button id="execute-button">Execute</button>
    <div id="messagebox"></div>
    <div id="1" style="background-color:blue;display:none;height:33%;width:100%;"></div>
    <div id="2" style="background-color:green;display:none;height:33%;width:100%;"></div>
    <div id="3" style="background-color:red;display:none;height:34%;width:100%;"></div>
    <div id="4" style="background-color:brown;height:33%;width:100%;"></div>
    <div id="5" style="background-color:black;height:33%;width:100%;"></div>
    <div id="6" style="background-color:gray;height:34%;width:100%;"></div>
    <script>
        $(document).ready(function(){

            function hideElements(callback){
                //hide elements
                var hideDivs = ["#4","#5","#6"];
                for(i = 0; i < hideDivs.length; i++){
                    //alert("hiding...");
                    $(""+hideDivs[i]).hide("drop",{direction:"left"},5000);
                    //alert(divs[i]);
                }
                callback();
            };

            function showElements(){
                //show elements
                var showDivs = ["#1","#2","#3"];
                //alert(JSON.stringify(divs));
                for(i = 0; i < showDivs.length; i++){
                    //alert("showing...");
                    $(""+showDivs[i]).show("drop",{direction:"right"},1000);
                    //alert(divs[i]);
                }
            }


            hideElements(showElements());

        });


        $(document).on("click","#execute-button", function(){
            //$("#messagebox").html("test");
            $("#1").show("#1");
        });
    </script>
</body>
</html>

Answer 1

在 jQuery 中，如果你.promise()在 jQuery 集合上使用，它会返回一个承诺，当集合中的所有元素都完成它们的动画时，它会被解析。所以，你应该能够.hide()在每个元素上触发动画，然后.promise()在集合上做，当这个承诺解决时，你可以做另一个动画。

这是一个工作片段示例：

// returns a promise that resolves when all animations started here are done
function showHide() {
    var items = $("#4, #5, #6");
    return items.slideUp(2000).promise().then(function() {
        // this runs when all animations in the items collection are done
        return items.slideDown(2000).promise();
    });
}

$("#go").click(function() {
    showHide().then(function() {
        console.log("animation done");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div>
<button id="go">Run</button>
</div>

<div style="height: 300px;">
    <div id="4" style="background-color:brown;height:33%;width:100%;"></div>
    <div id="5" style="background-color:black;height:33%;width:100%;"></div>
    <div id="6" style="background-color:gray;height:34%;width:100%;"></div>
</div>

当然，如果您所有的第一组动画都具有相同的时间，您可以只使用 jQuery 动画链（其中给定对象的动画进入队列，随后的动画在开始之前等待前一个完成）：

// returns a promise that resolves when all animations started here are done
function showHide() {
    return $("#4, #5, #6").slideUp(2000).slideDown(2000).promise();
}