Temporizadores en JavaScript

Esta página muestra el uso de temporizadores para crear efectos dinámicos con texto.

¿Qué son los temporizadores?

Los temporizadores son objetos sin representación física que se encargan de ejecutar una tarea al cabo de cierto tiempo que se le debe indicar.

// Crear un temporizador
NombreTemp = setTimeout("nombrefunción()", tiempo);

// Detener un temporizador
clearTimeout(NombreTemp);

Los temporizadores son útiles para crear animaciones, ejecutar código después de un retraso, o realizar acciones repetitivas a intervalos regulares.

Texto Animado con Temporizador

Este script muestra texto animado letra por letra usando la función setTimeout().

200 ms

Información:

Código del ejercicio:

/* Texto animado */
var velocidad = 200;
var letras;

function animar() {
    letras = new Array();
    var texto = "Uso de cadenas con JavaScript para efectos dinámicos";
    for(i = 0; i < texto.length; i++) {
        letras[i] = texto.charAt(i);
    }
    mueveLetras();
}

var TextoAct = "";
var n = -1;
var temporizador;

function mueveLetras() {
    n++;
    TextoAct += letras[n];
    document.getElementById("animatedText").innerText = TextoAct;
    if(n == letras.length - 1) {
        n = -1;
        TextoAct = "";
    }
    temporizador = setTimeout("mueveLetras()", velocidad);
}

Explicación:

• La frase "Uso de cadenas con JavaScript para efectos dinámicos" se mostrará letra por letra cada 0.2 segundos.

• La función setTimeout() programa la ejecución de la función mueveLetras() después del tiempo especificado.

• Cuando se completa la animación de toda la frase, se reinicia el proceso.

• Podemos controlar la animación con setTimeout() para iniciarla y clearTimeout() para detenerla.

Personalizar Texto Animado

Prueba con tu propio texto y velocidad de animación.

Cómo funciona:

function animarPersonalizado(textoPersonalizado, velocidadPersonalizada) {
    letras = new Array();
    for(i = 0; i < textoPersonalizado.length; i++) {
        letras[i] = textoPersonalizado.charAt(i);
    }
    TextoAct = "";
    n = -1;
    velocidad = velocidadPersonalizada;
    mueveLetrasPersonalizado();
}

function mueveLetrasPersonalizado() {
    n++;
    TextoAct += letras[n];
    document.getElementById("customAnimatedText").innerText = TextoAct;
    if(n < letras.length - 1) {
        temporizadorPersonalizado = setTimeout(mueveLetrasPersonalizado, velocidad);
    }
}

Bajar el archivo de texto con el código completo

Volver