Skip to content

Instantly share code, notes, and snippets.

@joalbertg
Last active November 16, 2017 19:34
Show Gist options
  • Save joalbertg/abbfa65a134916b8bef322f26a3c12fd to your computer and use it in GitHub Desktop.
Save joalbertg/abbfa65a134916b8bef322f26a3c12fd to your computer and use it in GitHub Desktop.
Uso del setInterval y clearInterval
/* escribe un párrafo con un efecto de máquina de escribir
** usando setInterval(callback, time)
** parámetro str una cadena de texto
*/
var writing = function(str) {
// array de todos los carácteres del string
// ej. str = 'Hola';
// str.split(''); genera un array ['H', 'o', 'l', 'a']
var arrFromStr = str.split('');
var i = 0;
var strTemp = '';
// se debe usar una variable como referencia al método setInterval,
// para poder hacer uso del método clearInterval(refSetInterval)
var printStr = setInterval(function(){
// se va agregando carácter por carácter al strTemp
// es igual a strTemp = strTemp + arrFromStr[i];
strTemp += arrFromStr[i];
// se agrega al body el string que se tenga en ese momento
document.body.innerHTML = '<h1>' + strTemp + '</h1>';
// incremento de i para que el método setInterval actue como un ciclo.
// ej. ciclo for(var i = 0; i < length; i++) {...}
i++;
// si i es igual a la longitud del array
// se elimina el cliclo creado con setInterval(callback, time)
// se debe notar que la llamada a la referencia del setInterval(...)
// se puede usar dentro de la misma función del método setInterval
if (i === arrFromStr.length)
clearInterval(printStr);
// tiempo indicado en milisegundos, 1 seg son 1000 ms
}, 200);
}
// llamada al método
writing('Bienvenidxs a Laboratoria!!!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment