3

Estoy intentando poner letra a letra un nombre con un retardo de un segundo.

let nombre = document.getElementById('nombre').value; //Mario

 for (let i = 0; i < nombre.length; i++) {
     setInterval(function(){name.innerHTML +=nombre.charAt(i); }, 1000);
     //alert(name.innerHTML);
}

Lo que sucede aquí es que se pausa durante 1 segundo y después pinta el nombre.

Lo que busco es que ponga la M -> pase 1 segundo -> a -> pase 1 segundo -> r -> pase 1 segundo -> i -> pase 1 segundo -> o

2 respuestas 2

3

Cuando usas setInterval no necesitas un bucle, puesto que precisamente lo que hace es ejecutar la función repetidamente. Puedes usar un bucle con setTimeout o una sola llamada a setInterval:

const texto = 'En un lugar de la Mancha...';
let nombre = document.getElementById('nombre');
let index=0;
let intervalId = setInterval(function(){
  nombre.innerHTML +=texto[index++];
  if (index === texto.length) {
    clearInterval(intervalId);
  }
}, 200);
<p id="nombre"> </p>

Con setTimeout sería algo como:

const texto = 'En un lugar de la Mancha...';
let nombre = document.getElementById('nombre');
for (let i = 0; i < texto.length; i++) {
  setTimeout(() => {
    nombre.innerHTML +=texto[i];
  }, 200*i);
}
<p id="nombre"> </p>

2

Este es otro enfoque, derre te funciona mejor. Lo que hize fue implementar el bucle dentro del setInterval, luego cuando cumpla con todas las letras elimino el setIntervalcon el ID del timer.

var pintar = function (palabra) {
	var counter = 0;
	var idtm;
	idtm = setInterval(function(){
			if(palabra.length > counter){
				console.log(palabra[counter]);
				counter	++;
			}else{
				clearInterval(idtm);
				console.log("Fin");
			}
	}, 1000);
}

pintar("Mario");

1
  • Gracias por tu idea! Me sirve perfectamente.
    – DevMind
    Commented el 30 mar. 2019 a las 16:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.