Как создать эффект пишущей машинки?

Question

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

HTML код:

<h1 id="typewriter"></h1>

Javascript код:

typewriter();

function typewriter() {
    var textArray = text1.split("");
    for (var i = 0; i < textArray.length; i++) {
        document.getElementById('typewriter').innerHTML = textArray[i];
        setTimeout(typewriter, 80);
    }
}

Заранее спасибо за помощь!

Answer 1

Я думаю, вы ищете что-то вроде этого:

Вы устанавливаете тайм-аут для каждого символа строки, но даете каждому таймауту дополнительную задержку

Итак, первый символ будет записан после задержки 0 мс Второй после задержки 100 мс Третий после задержки 200 мс И так далее

Пример:

function typewriter(element, text, delay = 100) {
  for (let i = 0; i < text.length; i++) {
    setTimeout(() => {
      element.innerHTML += text[i];
    }, delay * i);
  }
}

const el = document.getElementById("typewriter");
typewriter(el, "Lorem ipsum dolor sit amet");

<h1 id="typewriter"></h1>

Answer 2

Использование современного async / await делает такие вещи приятными и простыми.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function typewriter(element, text, delay = 100) {
  for (let i = 0; i < text.length; i++) {
    await sleep(delay);
    element.innerHTML += text[i];
  }
}

const el = document.getElementById("typewriter");
typewriter(el, "Lorem ipsum dolor sit amet");

<h1 id="typewriter"></h1>

Answer 3

Используйте этот способ работы.

var i = 0;
var text = "Hello World!!";
typewriter();
function typewriter() {
    debugger;
    if (i < text.length) {
        document.getElementById('typewriter').innerHTML += text.charAt(i);
        i++;
        setTimeout(typewriter, 100);
    }
}

Answer 4

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

text = text.split("")

function typewriter() {
    document.getElementById('typewriter').innerHTML += text.shift();
}


setInterval(typewriter, 1000);