javascript - 你如何每秒将一个 div 附加到一个容器？

Question

我正在尝试找到一种将一个 div 一次一个地附加到容器的好方法。我不想附加所有 div 并让它们一次淡入一个。下面的代码不起作用。如果没有 for 循环，它会一次附加一个。我尝试了 for 循环来限制按顺序附加 div 的次数，但它每秒输出 4 个 div。我希望它每秒输出一个 div，四次。

for(var i = 0;i < 4; i++){
        setInterval(function(){
            $(".output").append("<div class='odiv'>TEST</div>")
        },1000)
 }

CSS:

.odiv{
        display: inline-block;
}

html:

<div class="output"></div>

Answer 1

只需使用超时而不是时间间隔作为当前迭代索引的函数 1000 * i:

for (var i = 0; i < 4; i++) {
    setTimeout(function () {
        $(".output").append("<div class='odiv'>TEST</div>")
    }, 1000 * i);
}

.odiv {
    display: inline-block;
    padding: 5px;
    background: #EEE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>