Как вы добавляете 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>

Answer 2

Ваш текущий код работает $('.output').append() четыре раза в секунду. Вот расстройство того, что делает ваш текущий код:

- 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. 

В результате 4 интервалов прилагая .odiv элемент каждые 1000 миллисекунд.

Вы хотите добавить один элемент .odiv каждые 1000 миллисекунд в течение 4 секунд. Для этого создайте функцию, которая добавляет div каждые 1000 миллисекунд и останавливает ее после 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) 

Работает jsFiddle.

Answer 3

использовать счетчик, чтобы очистить интервал:

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