youarentryan/decouple

Decouple the DOM events from expensive functions.

decouple

Decouple the DOM events from expensive functions.

Based on

• Paul Lewis's article Leaner, Meaner, Faster Animations with requestAnimationFrame.
• Paul Lewis's article Scrolling Performance.
• How to make faster scroll effects?
• Fixing a parallax scrolling website to run in 60 FPS
• John Resig's article Learning from Twitter.

Installation

$ npm install decouple

$ bower install decouple

$ spm install decouple

$ component install pazguille/decouple

Usage

function foo(event) {
  console.log('foo');

  // The function receive the scroll event as parameter.
  console.log(event);

  // The function context is the given node.
  console.log(this.scrollTop);
}

function bar() {
  console.log('bar');
}

decouple(document.querySelector('#box'), 'scroll', foo);

API

decouple(node, event, listener)

Decouple the DOM event from the listener on give node. Returns the listener handler.

• node {HTMLElement} - A given HTMLElement.
• event {String} - A given DOM event.
• listener {Function} - A given listener to execute when the given event is fired.

decouple(window, 'scroll', fn);

With ❤ by

• Guille Paz (Front-end developer | Web standards lover)
• E-mail: guille87paz@gmail.com
• Twitter: @pazguille
• Web: https://pazguille.me

License

MIT license. Copyright © 2016.