Почему весь текст появляется разом, а не по буквам?

Question

[Anvario0]

Задание:
Написать программу, которая выведет текст по буквам.

Я написал программу, но она почему-то выводит весь текст разом спустя заданное время.

html:

<h1 id="h1">
    <span hidden>H</span><span hidden>E</span><span hidden>L</span><span hidden>L</span><span hidden>O </span><br><span hidden>W</span><span hidden>O</span><span hidden>R</span><span hidden>L</span><span hidden>D</span>
</h1

JS:

let spans = h1.children;


for(let i = 0; i < spans.length; i++) {
    setTimeout(() => spans[i].removeAttribute('hidden'), 500)
}

Comments

[godsplan]

Потому что все таймауты работают после заверешния цикла

[Дмитрий]

godsplane, причина тут в другом. А сами таймауты не ждут завершения никаких циклов. Они создаются и начинают отсчет времени ровно тогда, когда указаны в коде.

Answer 1

[Дмитрий]

Потому что вы создали length таймаутов одновременно в цикле, и все на 500 мс. Вот они все и отработают одновременно. Умножьте 500 на i и дело с концом

Comments

[Anvario0]

Кажется я понял ошибку, но не понял, почему если умножить 500 на i, то это исправит положение?

[Beliyadm]

Anvario0, Потому что в цикле у вас 10 итераций (по буквам), соответственно время i равно 500/10

for(let i = 0; i < spans.length; i++) {
    setTimeout(() => spans[i].removeAttribute('hidden'), 500*i)
}

[Дмитрий]

Anvario0, первый таймаут сработает через 500*0=0, второй через 500*1=500, третий через 500*2=1000 и так далее. Если нужно, чтобы и первый сработал не сразу, то умножаем на (i+1)

Answer 2

[GrayHorse]

Потому что все таймеры запущены в один момент.

Читаемый и работающий код:

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

for (const span of h1.children) {  
    await sleep(500);  
    span.removeAttribute("hidden");    
}

Хотя, конечно, лучше:

const h1 = document.querySelector("h1");
const chars = "HELLO".split("");

for (const char of chars) {  
    await sleep(500);  
    h1.textContent += char;    
}

Answer 3

[Anonymous Penguin]

HTML:
<div id="output"></div>
JS:

const text = 'Hello World!';
const output = document.getElementById('output');

let i = 0;
let printing = setInterval(function () {
  output.innerHTML += text[i];
  if (++i == text.length) clearInterval(printing);
}, 500);