Skip to content

Commit

Permalink
update documentation for new setTimeout behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
Mike Deverell committed Aug 23, 2016
1 parent 85e2683 commit d62143a
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 0 deletions.
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file.

This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- When [requestAnimationFrame] does not exist, call the callback immediately
and ignore further events for 1/60th of a second. Old behavior was to wait
1/60th of a second before calling callback.

### Misc
- Additional documentation in README
- coveralls.io and travis badges in README
- additional tests to cover `setTimeout` use case

## 1.0.0 - 2016-07-30
### Added
- Initial release


[requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

[Unreleased]: https://github.com/pelotoncycle/frame-throttle/compare/v1.0.0...HEAD
25 changes: 25 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,15 @@ immediately prior to the browser rendering the updated layout to the screen.

To avoid wasting cycles, we can use [requestAnimationFrame] to only run the
event listener once just before the page is rendered to the screen.
For browsers that do not support `requestAnimationFrame`, _frame-throttle_
will fall back to `setTimeout` (see [gotchas](#gotchas) below.)

## Use

To use _frame-throttle_, simply create your listener, and pass it to the
`throttle` method. You can then pass the throttled listener to
`addEventListener` and `removeEventListener` like any other listener:

```
var throttle = require('frame-throttle');
Expand All @@ -34,13 +40,32 @@ var listener = function(e) {
var throttledListener = throttle(listener);
window.addEventListener('resize', throttledListener);
window.removeEventListener('resize', throttledListener);
```

## Gotchas

There is a slight difference in how `frame-throttle` works that depends on
whether or not `requestAnimationFrame` exists.

If `requestAnimationFrame` exists, then the callback will be called during the
animation-frame callback section of the browser's next [browsing context event loop].
In this case the callback is called at the optimal time because all layout and
dimensions will be the most up-to-date available before the page is rendered
to the screen.

If `requestAnimationFrame` does not exist, then the callback will be called
immediately, and will not be called again for at least 1/60th of a second. This
allows you to make make adjustments before the next frame renders, but there is
a small possibility that the information you calculate your changes off of will
be out of date by the time the next frame renders.


[travis-image]: https://travis-ci.org/pelotoncycle/frame-throttle.svg?branch=master
[travis-url]: https://travis-ci.org/pelotoncycle/frame-throttle

[coveralls-image]: https://coveralls.io/repos/github/pelotoncycle/frame-throttle/badge.svg?branch=master
[coveralls-url]: https://coveralls.io/github/pelotoncycle/frame-throttle?branch=master

[browsing context event loop]: https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8
[requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

0 comments on commit d62143a

Please sign in to comment.