using setInterval in javaScript

Many javaScript projects will require some kind of main application loop that will execute over an over again. There are many ways to go about doing this, one of which is the setInteval method. It is not always the best option for doing so, but depending on the nature of the project sometimes it might be what is called for to get an app loop up and running.

The setInterval method will fire a given method after a given millisecond value has elapsed, after which point it will fire again after the given millisecond value has elapsed again, and so on. It is therefor a popular, and well known way of implementing an application loop. It can also be thought of as a starting point that can branch off into other topics such as state management, and the nature of how threading, and event loops in a javaScript environment. However maybe it would be best to look into other options on top of setInterval before getting into any of that.

So then there are alternatives to setInterval to be aware of such as setTimeout, and requestAnimationFrame when it comes to client side javaScript. The setTimeout method works the same way more or less as setInterval, but will just fire the given method once after a delay. However the setTimout method can be called from within the body of the method that is begin called that can result in a similar effect to the use of setInterval. In addition to setTimeout the requestAnimationFrame is yet another options to be aware when it comes to client side javaScript that might prove to be a better choice when it comes to making canvas projects.

There is also the topic of threading that often comes up when talking about setInterval, and similar methods when working with what is called an event loop, and ways to have more than one event loop. I see lots of javaScript developers saying that javaScript is a single threaded language, I shy away from saying that because it strikes me as a bit of a half truth actually. In a modern web browser there are ways of sining up more that one event loop, which does result in more than one independent thread, but on a per process basis. So in a way it is true that javaScript is a single threaded language compared to what may be possible with other languages, but it is important to know what you mean by that.

The subject of what is often refereed to as true threading is a complex topic that is something that is outside the scope of this post, it is not something that can be done with setInterval by itself at least, and possible not with javaScript at all depending on how you go about labeling what true threading is. So in this post I will just be sticking to some basic examples of setInterval, and will not be getting into what can be done with things like webWorker in a client side javaScript environment, and the child process module in nodejs.

1 - Basic example of setInterval

At a minimum setInterval must be given at least two arguments. The first argument is the function to call, and the second is the minimum amount of time that should pass in milliseconds before the function is called. Once the function is called the function will be called again after the given about of time passes again, and then again, over an over again indefinitely unless clearInterval is used to stop it.

1
2
3
4
5
setInterval(function(){
console.log('tick');
},1000);

The above example will fire the function that logs the string tick to the console ruffly once every second. I say ruffly because it is not always guaranteed that it will fire every one second right on the nose. The reason why is because of the nature of event loops, and javaScripts single threaded like nature, there are things that can hold things up. How ever when it comes to something very simple like this, and only this, the function should fire on time more or less. So now that we have a very basic example covered lets look at some more examples of setInteral in action.

2 - The clearInterval for stopping setInterval

One a loop is started with setInterval it is possible to stop it by using the clearInterval method. When calling setInterval an intervalID will be returned, this intervalID can then be passed to the ClearInterval methods as a way to stop the loop.

1
2
3
4
5
6
7
var t = setInterval(function () {
console.log('tick');
}, 250);
setTimeout(function () {
clearInterval(t);
}, 3000);

3 - Using date objects

There is using setInterval to get a function to call over and over again, and then there is creating a state object that will be updated each time that function is called. So in this example I will be going over a very basic game module, and a state object that contains an instance of that module, and using date objects as a way to update the state of a variable by way of the number of seconds that has passed sense the last update.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var gameMod = {
create: function () {
return {
maxSecs: 1,
moneyPerSecond: 10,
money: 0
}
},
update: function (model, secs) {
secs = secs > model.maxSecs ? model.maxSecs : secs;
model.money += model.moneyPerSecond * secs;
}
};
var state = {
game: gameMod.create(),
lt: new Date()
};
var loop = function () {
var now = new Date(),
t = now - state.lt,
secs = t / 1000;
gameMod.update(state.game, secs);
console.log(state.game.money);
};
setInterval(loop, 250);

4 - Basic state machine example

One of the many use case examples of setInterval is as a means to get some kind of state machine up and running. Many projects will involve ruining the same code over, and over again and often that code can become somewhat complicated. Also it might change depending on the state of the application, there is code that may need to be updated each tick in a menu, and then code that will be updated only when a main game part of an application is running. So with that said if you have a strategy game, it does not make sense to have game code running when you are navigating around a map system for levels, or a main game options menu.

So then breaking code down into many separate states will help to make the project more manageable, and in many cases doing so is just necessary because you do not want all code in the project to be updated all the time, just what needs to be updated based on a current application state. The basic idea would be to have not just one, but several update methods, and a property that is used to know which method to call at the current moment. In addition to this there will need to be a main app loop, this is where something like setInterval might come into play, at least when it comes to just updating a model in a headless way at least.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var currentState = 'start',
startX = 10,
deltaX = 5,
x = 0;
var states = {
start: function() {
console.log('start state');
// set x at startX
x = startX;
// change to tick state
currentState = 'tick';
},
reset: function() {
console.log('reset state');
x = startX;
currentState = 'tick';
},
tick: function() {
console.log('tick state ( x = ' + x + ')');
x += deltaX;
// some reset rules
if (x >= 100 || x <= -100) {
currentState = 'reset';
}
}
};
var loop = function() {
states[currentState]();
};
setInterval(loop, 1000);

A more advanced example might include some kind of state object constructor with all kinds of methods that can be used for any given state, but you should get the basic idea. Often I do not use setInetravl in projects such as this in favor of another option that may be a better choice when it comes to not just updating a module, but also rendering in addition to that.

5 setInterval vs requestAnimationFrame

In my examples to far I am not doing anything that involves updating a canvas, or DOM element in a client side environment. If that was the case I would opt to use requestAnimationFrame as it is a far better alternative to setInterval or setTimeout.

6 - Conclusion

That is all for this post at least, but I would not stop there when it comes to reading more about setInterval, as well as the other options for creating an app loop. There is looking into what there is to watch on youtube when it comes to setInterval, but maybe the best option is to just start learning by doing. Come up with some of your own projects that make used of an app loop, and get to work making some of your own examples of setInterval.