Last active
July 31, 2019 11:15
-
-
Save cferdinandi/9029584 to your computer and use it in GitHub Desktop.
A technique for throttling listener events (like resize or scroll) for better performance. https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var eventTimeout; // Set timeout variable | |
/** | |
* The function that runs the event actions | |
*/ | |
var actualEventHandler = function () { | |
// handle the event... | |
}; | |
/** | |
* Throttle events to only run at 15fps | |
*/ | |
var eventThrottler = function () { | |
// ignore resize events as long as an actualResizeHandler execution is in the queue | |
if ( !eventTimeout ) { | |
eventTimeout = setTimeout(function() { | |
eventTimeout = null; | |
actualEventHandler(); | |
}, 66); | |
} | |
}; | |
// Run the event listener | |
window.addEventListener( 'resize', eventThrottler, false ); |
Resize events are not getting ignored when I used this. It ques up all the actualEventHandler()
and then they all happen at once
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I've wrapped similar logic into a reusable module here