Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Throttling using windows.requestAnimationFrame with fallback to lodash throttle. See more here:
(function() {
var defaultFrameRate = 20, // fps lock for old browsers
// This is the default fallback throttle function
framerateThrottle = function(callback) {
return _.throttle(callback, 1 / (defaultFrameRate * 1000));
// Feature detection - should have requestAnimationFrame
if (window.requestAnimationFrame) {
framerateThrottle = function(callback) {
var mayUpdate = false,
update = function() {
mayUpdate = true;
// initial update
// the function called by, e.g. an input event
return function() {
var thisArg = this;
// discard the invocation when mayUpdate
// is false (i.e. is throttled)
if (mayUpdate) {
mayUpdate = false;
return callback.apply(thisArg, arguments);
// Mix in the framerate throttle to lodash
framerateThrottle: framerateThrottle

csainty commented Aug 4, 2014

@spoike Missing a return on line 5?


spoike commented Aug 4, 2014

@csainty Oops, fixed!

voigtan commented Aug 5, 2014

line 5... should be 1000 / defaultFrameRate right?


spoike commented Aug 5, 2014

Thanks @voigtan

MeoMix commented Apr 27, 2015

Hi... I have some serious concerns about this code.

How does the 'update' function ever terminate? It's self-recursive and all it does is set 'mayUpdate' to true.

Infinitely calling RAF N times where N is the number of functions throttled is really, really scary. I'm surprised nobody has brought this up.

I had the same concerns as MeoMix. I handed up rolling my own. I did not put feature detection. Here is the gist :, JSBin with tests :,js,output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment