AfterFrame
Tiny function to invoke a callback after the browser renders the next frame
Table of Contents
Install
This project uses node and npm. Go check them out if you don't have them locally installed.
$ npm install --save afterframe
+ afterframe@0.0.0
Then with a module bundler like rollup or webpack, use as you would anything else:
// using ES6 modules
import afterFrame from "afterframe";
// using CommonJS modules
var afterFrame = require("afterframe");
The UMD build is also available on unpkg:
<script src="https://unpkg.com/afterframe/dist/afterframe.umd.js"></script>
You can find the function on window.afterFrame
.
Usage
Inspired by Nolan Lawson's blog on measuring layout
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
:
let promise = null;
function afterFrameAsync() {
if (promise === null) {
promise = new Promise(resolve =>
afterFrame(time => {
promise = null;
resolve(time);
})
);
}
return promise;
}
API
afterFrame
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, aDOMHighResTimeStamp
similar to the one returned byperformance.now()
, indicating the point in time whenafterFrame()
starts to execute callback functions.
Prior Work
- The implementation for this package is heavily inspired by React's Scheduler. Some commits of particular interest:
- 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.
Reporting Issues
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.
Submitting pull requests
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/<your-username>/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.