Hacer el efecto de un texto que se está escribiendo por si solo

publicado por: Anonymous

Lo que estoy haciendo es un efecto que hace parecer un texto que se escribe por si solo, el código que tengo es el siguiente:

Es un simple <body> con dos elementos para ver el ejemplo (también en: jsfiddle).

_x000D_

_x000D_

$("#write").click(function() {_x000D_
_x000D_
  //Es un fragmento de texto extraido del periódico "El país"_x000D_
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";_x000D_
_x000D_
  var writer = "";_x000D_
  writer.length = 0; //Limpiar el string_x000D_
  var maxLength = text.length;_x000D_
  var count = 0;_x000D_
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres_x000D_
_x000D_
  var write = setInterval(function() {_x000D_
_x000D_
    if (count > text.length) {_x000D_
      clearInterval(write);_x000D_
    }_x000D_
_x000D_
    writer += text.charAt(count);_x000D_
    document.getElementById("text").innerHTML = writer;_x000D_
    count++;_x000D_
_x000D_
  }, speed);_x000D_
_x000D_
  $("#write").click(function() {_x000D_
    clearInterval(write);_x000D_
  }); //si se pulsa en el botón limpiar el intervalo_x000D_
_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<button id="write" type="button">Write!</button>_x000D_
<h1 id="text"></h1>

_x000D_

_x000D_

_x000D_

La duda que tengo es que no sé si estoy usando el método correcto para hacerlo. Es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de éste… en eso es en lo que estoy dando vueltas.

solución

Tomando como base tu codigo. y usando setInterval(function(){

_x000D_

_x000D_

function escribir(contenedor,writer,speed){_x000D_
_x000D_
   longitud = writer.length;_x000D_
_x000D_
   cnt = document.getElementById(contenedor);_x000D_
   var i=0;_x000D_
   tiempo = setInterval(function(){_x000D_
      cnt.innerHTML = cnt.innerHTML.substr(0,cnt.innerHTML.length-1) + writer.charAt(i)+ " ";_x000D_
      if(i >= longitud){_x000D_
         clearInterval(tiempo);_x000D_
         cnt.innerHTML = cnt.innerHTML.substr(0,longitud);_x000D_
         return true;_x000D_
      } else {_x000D_
         i++;_x000D_
      }},speed);_x000D_
};_x000D_
_x000D_
var texto =  "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas.";_x000D_
$("#write").click(function() {_x000D_
escribir("text",texto,100);_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<body>_x000D_
    <button id="write" type="button">Write!</button>_x000D_
        <h1 id="text"></h1>_x000D_
</body>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *