Посимвольное удаление текста с таймером

Question

Каждую секунду из параграфа должна удаляться одна последняя буква. Пробовал реализовать это с помощью setTimeout() в цикле, но работает неправильно, текст удаляется без задержек во времени. Что я делаю не так?

reduceText();

function reduceText() {
    let paragraph = document.querySelector('p');
    let text = 'Текст исчезает';
    setText(paragraph, text);
    let newText = text;
    for (let i = 0; i < text.length; i++) {
        newText = newText.substring(0, newText.length - 1);
        setTimeout(setText, 1000, paragraph, newText);
    }
    setText(paragraph, text);
}

function setText(paragraph, text) {
    paragraph.innerHTML = text;
}

Answer 1

Вы делаете неправильно то, что не ждете пока отработает предыдущий setTimeout перед заказом следующего. Все Ваши setTimeout-ы вызываются в плотном цикле и выстреливают практически одновременно через секунду.

reduceText();

function reduceText() {
  setTimeout(function() {
    let paragraph = document.querySelector('p');
    let text = paragraph.textContent;
    text = text.substring(0, text.length - 1);
    paragraph.textContent = text;
    if (text)
      reduceText();
  }, 100);
}

<p>The walrus and the carpenter</p>

БЛОГ НА HUSL

Посимвольное удаление текста с таймером

Ответы (1 шт):