[SOLUCIONADO] Doble loop ( triple según se mire) con promises y await, para asincronía

melkart239 · #1 (**permalink**) 01/11/2018, 06:28

Saludos.
Es mi primera incursión con las promesas y después de tantas horas "prometo no prometer nada" porque vaya lío. :)
Quiero imprimir consecutivamente en la consola 3 veces del 0 al 5 y del 0a al 5a. Es decir: 012345-0a1a2a3a4a5a y 012345-0a1a2a3a4a5a y 012345-0a1a2a3a4a5a.
He conseguido que imprima el bloque completo sin que los dos bluces se superpongan mediante este código:

Código:

(async function loop(){
	for(var i=0; i < 6; i++){
		await new Promise(function(resolve){
			setTimeout(function(){
				resolve();
			}, 500);
			console.log(i);
		});
	}
})().then(function(){
(async function loop(){
	for(var i=0; i < 6; i++){
		await new Promise(function(resolve){
			setTimeout(function(){
				resolve();
			}, 500);
			console.log(i+'a');
		});
	}
})();

Se imprime 012345-0a1a2a3a4a5a.
Ahora quiero que lo haga 3 veces con este código:

Código:

(async function loop(){
	for(var x=0;x<3;x++){
		await new Promise(function(resolve){
			setTimeout(function(){
				//resolve();
			}, 500);
			console.log('x=' +x);
			(async function loop(){
				for(var i=0; i < 6; i++){
					await new Promise(function(resolve){
						setTimeout(function(){
							resolve();
						}, 500);
						console.log(i);
					});
				}
			})().then(function(){
				(async function loop(){
					for(var i=0; i < 6; i++){
						await new Promise(function(resolve){
							setTimeout(function(){
								resolve();
							}, 500);
							console.log(i + 'a');
						});
					}
				})();
			});
			//resolve();
		});
	}
})();

Como podéis ver en rojo no sé dónde poner el resolve de la primera promesa.
Aunque puede ser que no sea ese el problema. Ya estoy perdido.
Gracias por adelantado.

#2 (**permalink**) 01/11/2018, 09:26

¿Qué estás haciendo?

melkart239 · #3 (**permalink**) 01/11/2018, 11:15

Cita:

Iniciado por alvaro_trewhela

¿Qué estás haciendo?

Quiero quitar letra a letra un texto y luego sustituirlo por otro añadiendo también letra a letra

#4 (**permalink**) 01/11/2018, 23:06

Ejemplo?

Que no me queda claro que deseas hacer, es decir, entendí pero para quedar completamente claro dame un ejemplo sencillo.

melkart239 · #5 (**permalink**) 03/11/2018, 03:25

Cita:

Iniciado por alvaro_trewhela

Ejemplo?

Que no me queda claro que deseas hacer, es decir, entendí pero para quedar completamente claro dame un ejemplo sencillo.

Supon tengo la palabra "casa". Quiero que desaparezca la última letra, la a, un poco más tarde la s, etc. Cuando no quede texto, pasado un poco e tiempo, quiero escribir en ese mismo objeto la palabra "edificio", primero la e luego la d, etc. Cuando esté escrito edificio, vuelta a empezar. Que desaparezca edificio letra a letra y aparezca otra palabra letra a letra. Así tantas veces como quiera con diferentes palabras

#6 (**permalink**) 04/11/2018, 21:02

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
        function letter(el){
        var data = el.getAttribute("values").split(",");
            if(el.getAttribute("status") == "-1"){ el.setAttribute("status", "0"); el.innerHTML = data[0] ;  }
 
            if(el.innerHTML == ""){ //if innerHTML is empty renew...
            var status = parseInt(el.getAttribute("status"))+1;
                if(status >= data.length){ status = 0; }
            el.setAttribute("status",status);
            el.innerHTML = data[status];
            }
            else{
            var newCont = el.innerHTML.substring(0,el.innerHTML.length-1);
            el.innerHTML = newCont;
            }
        }
         
        setInterval(function(){ letter(document.getElementById("foo")) },200);
        </script>
    </head>
    <body>
        <p values="casa,edificio,jardin" status="-1" id="foo"></p>
    </body>
</html>

No lo probé pero se entiende la idea...

melkart239 · #7 (**permalink**) 07/11/2018, 14:07

Muchas gracias.
Tu idea me está sirviendo para desarrollarlo. Me has resuelto el camino a seguir. Pero te recuerdo que mi idea era primero ir eliminando letras y cuando estuviera desaparecida la palabra apareciera la siguiente palabra letra a letra.
Estoy en ello, cuando lo resuelva pondré la solución.

melkart239 · #8 (**permalink**) 09/11/2018, 03:31

Cita:

Iniciado por melkart239

Muchas gracias.
Tu idea me está sirviendo para desarrollarlo. Me has resuelto el camino a seguir. Pero te recuerdo que mi idea era primero ir eliminando letras y cuando estuviera desaparecida la palabra apareciera la siguiente palabra letra a letra.
Estoy en ello, cuando lo resuelva pondré la solución.

Creo que ya lo tengo.
De entrada gracias por tu sugerencia, ha sido vital para resolverlo. Me queda pendiente el tema de la asincronía.
Ahora la solución.

Código:

    <body>
        <p id="foo"></p>
    </body>

Y el script

Código:

	var data = ["casa","edificio","jardin","terraza"];
	var status = 0;
	var retrocede = 0;//controla si se está borrando la palabra
	function letter(el){
		if(el.innerHTML.length < data[status].length && !retrocede){
			el.innerHTML = data[status].substring(0, el.innerHTML.length + 1);
		}else{
			retrocede = 1;
			if(el.innerHTML.length > 0){
				el.innerHTML = el.innerHTML.substring(0,el.innerHTML.length - 1);
			}else{
				++status;
				retrocede = 0;
				if(status > 3){
					status = 0;
				}
			}
		}
	}
	setInterval(function(){ letter(document.getElementById("foo"));},400);

Espero tu opinión para dar la consulta como resuelta. Y gracias de nuevo,