Javascript 如何每秒向容器追加一次div？

我正试图找到一种好方法，将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)
 }

html:

---

当前代码每秒运行四次。下面是当前代码的详细说明：

- Start a loop for 0,1,2,3
--- Loop 0
    Append a div to `.output` every 1000 milliseconds.
--- Loop 1
    Append a div to `.output` every 1000 milliseconds.
--- Loop 2
    Append a div to `.output` every 1000 milliseconds.
--- Loop 3
    Append a div to `.output` every 1000 milliseconds.

结果是每1000毫秒有4次间隔追加

.odiv

元素

您希望每1000毫秒添加一个

.odiv

元素，持续4秒。为此，创建一个函数，该函数每1000毫秒追加一个div，并在第4次迭代后停止

var i = 0;
var appendDiv = setInterval(function() {
  if (i === 4) {
    // Stop the setInterval function from running
    clearInterval(appendDiv);
  } else (
    $(".output").append("<div class='odiv'>TEST</div>")
  )

  // Increase the counter
  i++
}, 1000)

var i=0；
var appendDiv=setInterval（函数（）{
如果（i==4）{
//停止setInterval函数的运行
clearInterval（附录div）；
}否则(
$（“.output”）.append（“测试”）
)
//增加计数器
我++
}, 1000)

---

这是一个工作时间。

使用计数器清除间隔：

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

var i=0；
var myInterval=setInterval（函数（）{
如果（i==4）返回clearInterval（myInterval）；
$（“.output”）.append（“TEST”）；
i++；
},1000);

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

1000*i

：

for（变量i=0；i<4；i++）{
setTimeout（函数（）{
$（“.output”）.append（“测试”）
}，1000*i）；
}

.odiv{
显示：内联块；
填充物：5px；
背景：#EEE；
}

您缺少

setInterval

的超时参数，请详细说明您的答案。

var i = 0;
var appendDiv = setInterval(function() {
  if (i === 4) {
    // Stop the setInterval function from running
    clearInterval(appendDiv);
  } else (
    $(".output").append("<div class='odiv'>TEST</div>")
  )

  // Increase the counter
  i++
}, 1000)

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