¿Por qué una función asíncrona, que se está esperando en medio del detector de eventos, elimina el estado y la fase del flujo de eventos? ¿Es posible mantenerlo?
Por ejemplo,
button.addEventListener("click", async (event) => { eventSnapshots.push({ title: "Sync", object: extract(event) }); syncFn(event); await asyncFn(); syncFn(event); writeToElement(eventSnapshots, view); });La instantánea del flujo de eventos sería algo así:
Sync: { "phase": 2, "currentTarget": {}, "path": 5, ... } SyncFn: { "phase": 2, "currentTarget": {}, "path": 5, ... } //await AsyncFn SyncFn: { "phase": 0, "currentTarget": null, "path": 0, ... }( https://codesandbox.io/s/pensive-hill-nzxvnl?file=/src/index.js:514-745 )
No es que esperar la promesa lo "caiga", sino que el evento continúa burbujeando después de llamar a su función de escucha async , sin esperar la promesa que devuelve. El burbujeo cambia automáticamente el currentTarget cuando se ejecutan controladores con el mismo objeto de evento en diferentes elementos, y cuando llega a la raíz del documento se vuelve undefined . Luego, cuando su código asíncrono regrese para ver el event nuevamente más tarde, ya se habrá cambiado. Lo mismo sucede cuando se usa setTimeout .