Вывод чисел в цикле с задержкой

Question

Нужно в цикле сделать вывод чисел от 0 до 400.

Отсчёт вывожу на экран, но отображаются только 0 и 400.

setInterval прошу не предлагать.

Пытался сделать с задержкой:

// Тут переменной amount назначил элемент
for (var i = 0; i <= 400; i++) {
    settimeout(function() {
        amount.innerHtml = i + " фантик(ов) из 400";
    ), 1000);
}

Answer 1

Добро пожаловать в асинхронное программирование.

• Проблема в том, что все итерации цикла происходят в одно и то же время (с точностью до пары миллисекунд).
• Функция называется setTimeout, а не settimeout.
• Свойство называется innerHTML, а не innerHtml.
• В данной ситуации проще всего использовать setInterval, так как каждая итерация происходит достаточно быстро (меньше задержки между итерациями). Но раз уж вы почему-то не хотите его использовать...
• Идея состоит в том, чтобы следующую итерацию вызывать только после завершения предыдущей, используя функцию.

Пример:

document.addEventListener('DOMContentLoaded', onDomReady);
function onDomReady() {
    var amount = document.getElementById('amount');
    (function iterate(i) {
        amount.innerHTML = i + " фантик(ов) из 400";
        if (i < 400) {
            setTimeout(function() { iterate(i + 1); }, 10);
        }
    })(0);
}

<div id="amount"></div>

Answer 2

Менее гибкий, менее хитрый вариант:

const amount = document.createElement('div')
document.body.appendChild(amount)
for(let i = 1; i<=400; i++){
    const message = i + " фантик(ов) из 400"
    setTimeout(()=>{ amount.innerHTML = message }, i*10)
}