LucVH
LucVH

Reputation: 335

Javascript Interval disadventage

I'm working on a website mainly for mobile and tablet. I just want to ask is there any drawback on using a bit too much Interval? As for now i'm using 1 interval with 5000ms to get and check current time and 1 interval with 100ms to check if the device's width change (for responsive purpose)

I've heard my senior said that we should try to use those interval as less as possible, it may cause some hole and lag and such. Is it true?

Upvotes: 0

Views: 144

Answers (3)

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

Update:
Check this page, and all linked articles of interest: Web Workers, Asynchronous events and Timeout in particular


The main disadvantage when using intervals is down to the fact that all current JS implementations that I know of are single threaded. So if you set an interval to call a function every 100ms, and another every 500ms, the intervals won't be executed simultaneously. If you rely heavily on the first interval having returned in the code you execute with the second interval, you're going to run into trouble sooner or later.

Another thing you might notice is that the intervals are not very accurate. 100ms should be seen as ~100ms, and make no mistake the difference between the set interval and the actual interval can be quite big (an interval of 100ms can turn out to be as much as 150ms easily).

Bottom line, your chief is right, avoid as much as possible. However, sometimes there is no alternative but to use intervals. In which case, List all intervals, find the smallest common denominator and set one big interval that uses a closure to call the various functions when "their time has come"

var allIntervals = (function()
{
    var interval100MS = function(){};
    var interval200MS = function(){};//etc...
    var timesCalled = 0;
    var timer = setInterval(function()
    {
       if (++timesCalled%2)
       {
           return interval100MS();
       }
       interval100MS();
       return interval200MS();
    },100);
    return timer;//<-- expose so you can clear the interval, of course
}());

You can expand this to return an object that allows you to set extra intervals, change the main interval time, unset certain intervals etc...

Edit
I overlooked the fact that you're using an interval. That's just not necessary: window.onresize or window.addEventListener('resize',handlerFunction,false); will do just that. Behind the scenes, JS has an event cycle/loop that takes care of things much more efficiently than any kind of self-made code.
It's often said that the best developers are, in essence, lazy people: They'll go through a lot of trouble, just to be sure that what they need hasn't been done before. If they find out about something that does what they need, they'll use that, rather than writing the same thing themselves.

Anyway, I've added a link on the very top of my answer, and I'm going to add it here a second time. Check it out, especially the references to web workers, which might prove useful if you're checking the time (not sure how/why/what you're doing there).

Upvotes: 1

Barney
Barney

Reputation: 16456

Both the respondents here have the right idea — the browser can tell you when it's resizing to avoid you continuously checking and comparing cached values, which would be very bad performance. But your senior's argument about unnecessary calls would still be right because many browsers fire resize continuously during the resize action (IE in particular), which can cause massive overhead.

A combination of the two ideas that mitigates these performance issues is to use a technique called 'throttling' to listen for an event, but only fire the response every so often.

There's an excellent plugin for this here: http://benalman.com/projects/jquery-throttle-debounce-plugin/

A healthy limit in my mind would be no more than 6-7 calls per second, ie only allow the end function to run once every 150 milliseconds (following on from @Tsunamis' answer):

$(window).resize($.throttle(150, function(){ /* do something */ }));

Upvotes: 1

Tsunamis
Tsunamis

Reputation: 6230

You set tasks to be executed every X seconds. Those tasks need CPU time and reduce the performance of your website. It of course depends on what you do in those tasks. But if you do it i.e. every 1000ms instead of 5000ms you have a lower performance. So it will always be better to choose as high values for your intervals as possible.

If you are using jQuery, you can use following code to check device width changes, which will use less performance than your own interval implementation:

$(window).resize(function() { /* do something */ });

Upvotes: 0

Related Questions