Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Doble loop ( triple según se mire) con promises y await, para asincronía en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/11/2018, 07:28
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 59
Antigüedad: 4 años, 1 mes
Puntos: 0
Doble loop ( triple según se mire) con promises y await, para asincronía

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)  
Antiguo 01/11/2018, 10:26
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 933
Antigüedad: 6 años, 1 mes
Puntos: 106
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

¿Qué estás haciendo?
  #3 (permalink)  
Antiguo 01/11/2018, 12:15
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 59
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

Cita:
Iniciado por alvaro_trewhela Ver Mensaje
¿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)  
Antiguo 02/11/2018, 00:06
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 933
Antigüedad: 6 años, 1 mes
Puntos: 106
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

Ejemplo?


Que no me queda claro que deseas hacer, es decir, entendí pero para quedar completamente claro dame un ejemplo sencillo.
  #5 (permalink)  
Antiguo 03/11/2018, 04:25
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 59
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

Cita:
Iniciado por alvaro_trewhela Ver Mensaje
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)  
Antiguo 04/11/2018, 21:02
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 933
Antigüedad: 6 años, 1 mes
Puntos: 106
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

Código HTML:
Ver original
  1.     <head>
  2.         <script type="text/javascript">
  3.         function letter(el){
  4.         var data = el.getAttribute("values").split(",");
  5.             if(el.getAttribute("status") == "-1"){ el.setAttribute("status", "0"); el.innerHTML = data[0] ;  }
  6.  
  7.             if(el.innerHTML == ""){ //if innerHTML is empty renew...
  8.             var status = parseInt(el.getAttribute("status"))+1;
  9.                 if(status >= data.length){ status = 0; }
  10.             el.setAttribute("status",status);
  11.             el.innerHTML = data[status];
  12.             }
  13.             else{
  14.             var newCont = el.innerHTML.substring(0,el.innerHTML.length-1);
  15.             el.innerHTML = newCont;
  16.             }
  17.         }
  18.          
  19.         setInterval(function(){ letter(document.getElementById("foo")) },200);
  20.         </script>
  21.     </head>
  22.     <body>
  23.         <p values="casa,edificio,jardin" status="-1" id="foo"></p>
  24.     </body>
  25. </html>

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

Última edición por alvaro_trewhela; 04/11/2018 a las 21:24
  #7 (permalink)  
Antiguo 07/11/2018, 14:07
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 59
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

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.
  #8 (permalink)  
Antiguo 09/11/2018, 03:31
 
Fecha de Ingreso: noviembre-2014
Ubicación: Madrid
Mensajes: 59
Antigüedad: 4 años, 1 mes
Puntos: 0
Respuesta: Doble loop ( triple según se mire) con promises y await, para asincronía

Cita:
Iniciado por melkart239 Ver Mensaje
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,



La zona horaria es GMT -6. Ahora son las 13:52.