Skip to content

Run event handlers in the animation frame, to prevent flooding and better performance.

License

Notifications You must be signed in to change notification settings

jtangelder/frame-events

Repository files navigation

frame-events

The browser is flooding your code with events, which could make your page slow. With this library you only receive the events at 60fps, with requestAnimationFrame.

Useful events would be scroll, resize, touchmove, mousemove and mousewheel.

How to use

FrameEvents.on(window, "scroll", yourHandler);
FrameEvents.off(window, "scroll", yourHandler);
// collect the layout properties...
function dataHandler(ev) {
  return { lastScrollY: window.scrollY }
}

// ...and you will receive them as the second property in your handler
function scrollHandler(ev, data) {
  console.log(data.lastScrollY)
}

FrameEvents.on(window, "scroll", scrollHandler, dataHandler);

For support of older browsers you should include a requestAnimationFrame polyfill.

Available on bower, named frame-events.

Related articles

Changelog

  • 0.0.1: removed es5 dependency and refactored
  • 0.0.0: initial

About

Run event handlers in the animation frame, to prevent flooding and better performance.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published