listenOnce

Adds an event listener to an element that will only run the callback the first time the event is triggered.

Use EventTarget.addEventListener() to add an event listener to an element, storing the reference in a variable. Use a condition to call fn only the first time the listener is triggered.

typescript

interface IEventListener {
  addEventListener: (event: string, fn: Func) => void;
}
const listenOnce = <E extends IEventListener>(el: E, evt: string, fn: Func) => {
  let fired = false;
  el.addEventListener(evt, (e) => {
    if (!fired) fn(e);
    fired = true;
  });
};

typescript

listenOnce(
  document.getElementById('my-id),
  'click',
  () => console.log('Hello world')
); // 'Hello world' will only be logged on the first click