AfterFrame

> Tiny function to invoke a callback after the browser renders the next frame

Table of Contents

- Install
- Usage
- Examples & Demos
- API
- Prior Work
- Contribute

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

``sh
$ npm install --save afterframe
+ afterframe@0.0.0
`

Then with a module bundler like rollup or webpack, use as you would anything else:

`javascript
// using ES6 modules
import afterFrame from "afterframe";

// using CommonJS modules
var afterFrame = require("afterframe");
`

The UMD build is also available on unpkg:

`html

`

You can find the function on window.afterFrame.

Usage

> Inspired by Nolan Lawson's blog on measuring layout

`js
import afterFrame from "afterframe";

performance.mark("start");

// Do some work...

afterFrame(() => {
performance.mark("end");
});
`

afterFrame currently relies on requestAnimationFrame and MessageChannel so support starts at IE10 and above.

Examples & Demos

Sample CodePen demonstrating usage of afterFrame

Example function wrapping afterFrame in a Promise:

`js
let promise = null;
function afterFrameAsync() {
if (promise === null) {
promise = new Promise(resolve =>
afterFrame(time => {
promise = null;
resolve(time);
})
);
}

return promise;
}
`

API

$3

Invoke the given callback after the browser renders the next frame

#### Parameters

- callback Function The function to invoke after the browser renders the next frame. The callback function is passed one argument, a DOMHighResTimeStamp similar to the one returned by performance.now(), indicating the point in time when afterFrame() starts to execute callback functions.

Prior Work

- The implementation for this package is heavily inspired by React's Scheduler. Some commits of particular interest:
- Post to MessageChannel instead of window
- Remove window.postMessage fallback
- Reduce scheduler serialization overhead
- Jason Miller's tweet of the same function provided some good inspiration for reducing code size
- Nolan Lawson blogged about using a similar technique to more accurately measure layout time

Contribute

First off, thanks for taking the time to contribute!
Now, take a moment to be sure your contributions make sense to everyone else.

$3

Found a problem? Want a new feature? First of all see if your issue or idea has already been reported.
If don't, just open a new clear and descriptive issue.

$3

Pull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.

- Fork it!
- Clone your fork: git clone https://github.com//afterframe
- Navigate to the newly cloned directory: cd afterframe
- Create a new branch for the new feature: git checkout -b my-new-feature
- Install the tools necessary for development: npm install
- Make your changes.
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature`
- Submit a pull request with full remarks documenting your changes.