javascript - 异步显示多个元素

Question

我有多个div，例如

<div class="a">a1</div>
<div class="a">a2</div>
.....

.a{display: none}

我尝试通过以下方式展示所有这些:
当div全部显示完成时，直接显示一个div(即一个接一个完成显示)

我尝试过，但没有成功。怎么做谢谢

function test(child) {
    setTimeout(function(child) {
        child.show();
        // this mean i don't know when a div finish show, it defend my caculate
        for (var i = 0; i < 5000000*random_number; i++) {
            var x = 0;
        }
    }, 0);
}
$(".a").each(function( index ) {
    test($(thís));
});

Answer 1

试试这个:

    $(function() {
        $(".a").each(function(index) {
            setTimeout(function(e) {
                e.fadeIn();
            }, index * 1000, $(this));
        });
    });

.a {
    padding: 10px;
    background-color: lightgray;
    margin-top: 5px;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a">a1</div>
<div class="a">a2</div>
<div class="a">a3</div>
<div class="a">a4</div>
<div class="a">a5</div>
<div class="a">a6</div>