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).
$("#write").click(function() {
//Es un fragmento de texto extraido del periódico "El país"
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.";
var writer = "";
writer.length = 0; //Limpiar el string
var maxLength = text.length;
var count = 0;
var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres
var write = setInterval(function() {
if (count > text.length) {
clearInterval(write);
}
writer += text.charAt(count);
document.getElementById("text").innerHTML = writer;
count++;
}, speed);
$("#write").click(function() {
clearInterval(write);
}); //si se pulsa en el botón limpiar el intervalo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="write" type="button">Write!</button>
<h1 id="text"></h1>
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.