setTimeout: почему элементы не выводятся по очереди

Question

Элементы, по задумке, должны появляться с промежутком в 2000 ms. На деле все элементы появляются вместе (а не по очереди) через 2000 ms. Почему так происходит?

var countNum = prompt("Введите сколько раз посторить", '');
var i = 0;
while (i < countNum) {
function createTime() {
}setTimeout(function () {
    createElementsInsideAndButton2();
    console.log("Содаёться элемент")
}, 2000);
i++;

}
function createElementsInsideAndButton2() {
    var colorArray2 = document.body.getElementsByClassName("container");
    for (var i = 0; i < colorArray2.length; i++) {
        var innerHtml = "";
        for (var j = 0; j < 3; j++) {
            innerHtml += '<div class="element">Element</div>';
        }
        colorArray2[i].innerHTML += innerHtml;
        colorArray2[i].innerHTML += '</br>';
    var btn = document.createElement("input");
    btn.id = "btn";
    btn.setAttribute("type", "button");
    btn.value = "+";
    colorArray2[i].parentNode.insertBefore(btn, colorArray2[i].nextSibling);
    console.log(colorArray2[i])
    console.log(btn)
}

}

в Html вызываю функцию createTime()

<p onclick="createTime()" type="button">Внимание сейчас создасться div</p>

Answer 1

Смотрите: setTimeout добавляет переданную функцию в очередь коллбеков таймера. То есть функция выполнится минимум ( но нет гарантии, что точно ) через N миллисекунд, которые вы передали вторым параметром.

В данном случае у вас цикл, который добавляет в очередь несколько колбеков. То есть когда цикл закончится, в очереди будет уже несколько функций. Задержка же у всех функций одинаковая, поэтому функции выполнятся без задержки между друг другом

Исправленный вариант

var i = 0;
var countNum = 10
while (i < countNum) {
  i++;
  setTimeout(function () {
    console.log("Создаётся элемент")
  }, i * 2000);
}