1

Why an async function, that is being awaited in the middle of the event listener, drops the state and the phase of the Event flow? Is it possible to keep it?

For example,

button.addEventListener("click", async (event) => {
  eventSnapshots.push({
    title: "Sync",
    object: extract(event)
  });

  syncFn(event);
  await asyncFn();
  syncFn(event);

  writeToElement(eventSnapshots, view);
});

The snapshot of the events' flow would be something like that:

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)

DEVMCEE
  • 123
  • 5
  • Remember that `await` is just syntactic sugar for `promise.then((result) => { rest of the function })`. So you lose the event state when you run the rest of the code in an asynchronous callback. – Barmar Feb 24 '22 at 22:13

1 Answers1

1

It's not that awaiting the promise "drops" it, but just that the event continues to bubble after calling your async listener function, without waiting for the promise returned by it. Bubbling automatically changes the currentTarget when running handlers with the same event object at different elements, and when reaching the root of the document it becomes undefined. Then when you async code comes back to look at the event again later, it will already have been changed. The same happens when using setTimeout.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Thank you! But is there any proper way to save (or freeze, or clone) the Event in the current state and pass it to the async part? – DEVMCEE Feb 25 '22 at 05:58
  • @DEVMCEE Yes, you can clone it. Or just pass the `currentTarget` separately. I don't expect `Object.freeze` to work, but you can try. – Bergi Feb 25 '22 at 09:26