One-time awaitable event listeners

[josephrocca]

Wondering if there has been any discussion around a better "built-in" solution to this sort of requirement?

// An `await`able function that resolves when page visibility changes:
function visibilityChange() {
  return new Promise(resolve => {
    document.addEventListener("visibilitychange", function() {
      resolve(document.visibilityState);
      document.removeEventListener("visibilitychange", arguments.callee);
    });
  });
}

// Use it like this:
await visibilityChange();
console.log(document.visibilityState);

I find myself doing this sort of thing fairly often (for many different types of events - not just visibilitychange) and it feels very "clunky".

[josephrocca]

Here are some vaguely related discussions, though all existing discussion seems to revolve around loading rather than events more generally.

• Add document.ready promise #127
• Add document.{parsed,contentLoaded,loaded} promises #1936
• Add means to detect if a script is loading, has loaded, or has errored #4594 (comment)
• Ergonomic Promise-based Image loading #7419

[Kaiido]

whatwg/dom#1038 maybe?

[jimmywarting]

You could also do:

function visibilityChange() {
  return new Promise(rs => document.addEventListener('visibilitychange', rs, { once: true }))
}

just maybe i would apply it to a more generic util pattern to some like:

const once = (elm, type) = new Promise(rs => el.addEventListener('visibilitychange', rs, { once: true }))

// and use it as such:
const evt = await once(document, 'visibilitychange')
console.log(document.visibilityState)

I don't particularly see any need for a one-time awaitable event listener. it can already be solved in user land. i think there is other more important features that gets higher priority such as those thing that can't be polyfilled