Tengo un script, en JavaScript, que tiene un efecto de mecanografía. Intenté hacer un bucle, para que se ejecute en un bucle después de 10 segundos desde el final de la ejecución. En otras palabras, hay un efecto de mecanografía y cuando el texto se escribe después de diez segundos, el código se ejecutará nuevamente. He intentado con setTimeout(), sin embargo, no funcionó.

Gracias por la ayuda de antemano.

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
      tag = "",
      writingTag = false,
      tagOpen = false,
      typeSpeed = 50,
      tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

    if (HTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += HTML[cursorPosition];
      }
    }
    if (!writingTag && tagOpen) {
      tag.innerHTML += HTML[cursorPosition];
    }
    if (!writingTag && !tagOpen) {
      if (HTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      }
      else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      }
      t.innerHTML += HTML[cursorPosition];
    }
    if (writingTag === true && HTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      writingTag = false;
      if (tagOpen) {
        var newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}

var typer = document.getElementById('typewriter');

typewriter = setupTypewriter(typewriter);

typewriter.type();
0
Mikisz 2 abr. 2017 a las 13:27

2 respuestas

La mejor respuesta

Desea setInterval.

SetInterval (function () {alert ("Hola");}, 3000);

Este código se ejecutará cada tres segundos.

Documentación completa, ejemplos, etc. aquí (incluyendo cómo detenerlo):

https://www.w3schools.com/jsref/met_win_setinterval.asp

0
Tim Consolazio 2 abr. 2017 a las 10:31
typewriter = setupTypewriter(typewriter);

Pasa typewriter variable a setupTypewriter, pero aún no existe. Aquí quieres usar

typewriter = setupTypewriter(typer);

Por cierto, no puedo entender cómo imprimir etiquetas. Imprime <, d, i, v, > con cero retraso, pero el analizador aún puede fallar. Debe imprimir la etiqueta de inmediato: <div></div> y luego agregarle el contenido de div.

1
Ivanq 2 abr. 2017 a las 10:39