A throttle
function that uses requestAnimationFrame
to limit the rate at which a function is called.
For background information on rate limiting functions, see Rate limiting functions from scratch
import rafSchd from 'raf-schd';
const expensiveFn = arg => {
//...
console.log(arg);
;
}
const schedule = rafSchd(expensiveFn);
schedule('foo');
schedule('bar');
schedule('baz');
// animation frame fires
// => 'baz'
raf-schd
supports the use case where you want to limit
the rate at which your functions are called based on
requestAnimationFrame
. Unlike a standard
throttle
function, raf-schd
uses
requestAnimationFrame
to rate limit, rather than waiting a
fixed amount of time. Using requestAnimationFrame
for
throttling is powerful because the browser will automatically reduce the
amount of frames provided based on the available resources. So if the
browser only provides 30fps then your throttled function will only be
called 30 times.
raf-schd
is an extremely useful
performance utility.
raf-schd
Optimised scroll listener example taken from MDN
var last_known_scroll_position = 0;
var ticking = false;
function doSomething(scroll_pos) {
// do something with the scroll position
}
window.addEventListener('scroll', function(e) {
= window.scrollY;
last_known_scroll_position if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
= false;
ticking ;
})
}= true;
ticking ; })
raf-schd
import rafSchd from 'raf-schd';
function doSomething(scroll_pos) {
// do something with the scroll position
}
const schedule = rafSchd(doSomething);
window.addEventListener('scroll', function() {
schedule(window.scrollY);
; })
At the top level raf-schd
accepts any function a returns
a new ResultFn
(a function that wraps your original
function).
The ResultFn
will execute your function with the
latest arguments provided to it on the next animation
frame.
import rafSchd from 'raf-schd';
const doSomething = () => {...};
const schedule = rafSchd(doSomething);
schedule(1, 2);
schedule(3, 4);
schedule(5, 6);
// animation frame fires
// do something called with => '5, 6'
.cancel
raf-schd
adds a .cancel
property to the
ResultFn
so that it can be easily cancelled. The frame will
only be cancelled if it has not yet executed.
const schedule = rafSchd(doSomething);
schedule('foo');
.cancel();
schedule
// now doSomething will not be executed in the next animation frame
rafSchedule
= (fn: Function) => ResultFn;
type rafSchedule
// Adding a .cancel property to the WrapperFn
= (...arg: mixed[]) => void;
type WrapperFn = {|
type CancelFn cancel: () => void,
|};
= WrapperFn & CancelFn; type ResultFn
If you want to really ensure that your code is working how you intend
it to - use raf-stub
to test your animation frame logic.
# yarn
yarn add raf-schd
# npm
npm install raf-schd --save
import rafSchd from 'raf-schd';
If you are in a CommonJS environment (eg Node), then you will need add
.default
to your import:
const rafSchd = require('raf-schd').default;