Handling events in requestAnimationFrame (es2016)

debouncedEvent.js

export const debouncedEvent = ({element, event, handler, useCapture=false}) => {
  let eventObject = null;
  let ticking = false;

  const update = _ => {
    ticking = false;
    handler(eventObject);
  };

  const requestTick = _ => {
    if(!ticking) {
      requestAnimationFrame(update);
    }
    ticking = true;
  };

  const onEvent = e => {
    eventObject = e;
    requestTick();
  };

  element.addEventListener(event, onEvent, useCapture);
  return () => {
    element.removeEventListener(event, onEvent, useCapture);
  };
};

• Usage:
  • add event:
    let removeListner = debouncedEvent({element: window, event: 'scroll', handler: funnyEventFunction});
  • remove event:
    removeListner();