Задать вопрос
@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)
}
  • Вопрос задан
  • 84 просмотра
Подписаться 1 Простой 2 комментария
Решения вопроса 1
thewind
@thewind
php программист, front / backend developer
Потому что вы создали length таймаутов одновременно в цикле, и все на 500 мс. Вот они все и отработают одновременно. Умножьте 500 на i и дело с концом
Ответ написан
Пригласить эксперта
Ответы на вопрос 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;    
}
Ответ написан
Комментировать
Anopeng
@Anopeng
Веб-программист, учу фронт и бек
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);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
06 дек. 2024, в 05:29
20000 руб./за проект
06 дек. 2024, в 03:58
10000 руб./за проект
06 дек. 2024, в 02:20
5000 руб./за проект