Decrease Javascript polling rate

Question

How do you decrease javascript event polling rate? The events I'm worried about are onResize and onScroll . These events can fire dozens of times per second when someone resizes their browser or scrolls down accordingly. I would like these events to occur only once every 500 ms, so I don’t have to spend hours optimizing the event handlers and make sure that they are not memory leaks.

Answer 1

var resizeTimeout; window.onresize = function() { if (resizeTimeout) { clearTimeout(resizeTimeout); } resizeTimeout = setTimeout(function() { // Do it! }, 500); }); 

This will call the setTimeout() function ~ 500 ms after the person finishes resizing.

The onscroll version onscroll very similar :)

Answer 2

You can’t control how often the event occurs, you can do something like remembering the time the event was first fired, then on each subsequent one you check to see if it exceeds more than 500 ms from the first - if so, you continue with the event handler, otherwise you just exit hanlder events

Answer 3

At the beginning of your handler, check to see if 500ms have passed since the last one, and just return if not.

Answer 4

You cannot prevent these events from starting. They always do it. What you want to do is immediately stop listening and then process the event to avoid repeating. Then the entire handler is configured again after setTimeout. There is no more recursion if someone does not resize the window. I use 5000ms here, since it’s easier to see how it works in the console. You should not see more than one spam in the FF console every 5 seconds, even if you resize as spam.

 (function staggerListen(){ window.onresize = function(){ window.onresize = false; console.log('spam'); setTimeout(staggerListen,5000); }; })() 

Using logic to decide whether to do something every time the handler fires, it still technically launches the handler and the if + lookup statement. It can become difficult.

Answer 5

check underscore debounce function

Creates and returns a new debugged version of the passed function, which will delay its execution until milliseconds of waiting have elapsed since the last call. Useful for implementing behavior that should only happen after an input has stopped. For example: rendering a preliminary comment by Markdown, recalculating the layout after the window has stopped changing, etc.

Example:

 window.onscroll = _.debounce( function() { // do something }, 500, false ); 

Answer 6

I used to do this as an accepted answer, but the problem is that it only starts after the specified timeout. I wanted to get a solution that handles resizing right away, for the first time. Here is what I did.

 var _resize_is_busy = false; var _resize_scheduled = false; var _resize_precision = 100; // This register for window resize events. No need to change anything. $(window).resize(function () { if (!_resize_is_busy) { // call the scheduler who will do the work and set a timer to // check of other resizes occured within a certain period of time _resize_scheduler(); } else { // the resizer is busy, ie a resize have been handled a little // time ago and then the scheduler is waiting some time before // handling any other resize. This flag tells the scheduler that // a resize event have been receive while he was sleeping. _resize_scheduled = true; } }); // This is the scheduler. No need to change anything. var _resize_scheduler = function () { _resize_is_busy = true; _resize_scheduled = false; setTimeout(function () { _resize_is_busy = false; if (_resize_scheduled) _handle_resize(); }, _resize_precision); _handle_resize(); } var _handle_resize = function () { console.log('DOING ACTUAL RESIZE'); // do the work here //... } 

Hope this helps.