Tengo una función asíncrona foo con una iterate asíncrona interna que tiene un bucle. El ciclo espera una promesa interna para resolver antes de continuar. El asíncrono externo espera iterate para finalizar antes de continuar. Quiero implementar un botón de reinicio que reinicie el ciclo.
Al volver a ejecutar iterate en el controlador, se crea una nueva instancia de ejecución paralela del ciclo que se puede ejecutar hasta su finalización. El problema es que foo todavía está esperando que se complete la primera instancia. ¿Hay alguna manera de hacer esto correctamente?
async function foo() { async function iterate() { for (let i = 0; i < 5; i++) { const position = await new Promise() // Resolves after the user does something // do stuff } } button.onclick = async () => await iterate(); // Set up event handler await iterate(); // First call // Button gets clicked -> Second call takes over // Now first call never ends and can't finish `foo()` }Finalmente pude hacerlo usando promesas y, más específicamente, llamando a resolve() después del bucle y, lo que es más importante, en el controlador:
async function foo() { async function iterate() { await new Promise(async (resolve) => { button.onclick = async () => { await iterate(); // Set up event handler resolve(); } for (let i = 0; i < 5; i++) { const position = await new Promise() // do stuff } resolve(); } await iterate(); } De esa manera, incluso si el ciclo inicial nunca termina, cuando finaliza la llamada en el controlador, el controlador mismo llama a resolve() y salimos de este foo .
Esto es solo un poco engañoso, pero si alguien tiene un enfoque más conciso o directo, me complacería comprobarlo.