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.
2 - The clearInterval for stopping setInterval
Once a loop is started with setInterval it is possible to stop it by using the clearInterval method. When calling setInterval an interval ID will be returned, this interval ID can then be passed to the Clear Interval method as a way to stop the loop. So for this example here I am using set interval to have a function call every two hundred and fifty milliseconds, when doing so I store the reurned interval id to a variable. I am then using the set timeout method to fire another function that will call clear timeout with the id that is returned when calling set interval.
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 the loop 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.
So I have a game module object that contains a create method that I can use to create a new game object instance. I will be using this method to create an store an instance of my game object for a main state object. For now this came state does not sore anything ti interesting just some properties that have to do with a current count of money, and how much money the player gets per second, as well as a max seconds value. After the create method I also have an update method that will cap and seconds value that it is given when it is called in the main app loop function. The update loop then just adds an amount of money to the money prop by the money per seconds value and the resulting seconds value.
In the state object I create an instance of the game object, and I also create a new Date object instance that I set to an lt property. Inside the loop function that I will be using with set interval I find out what the current time is, and then I find out what the elapsed amount of time is from the last update using the state lt property. I can then just divided the amount of elapsed time in milliseconds seconds by one thousand to the a number of seconds which I then pass to my update method with the instance of the game object.
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.
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. I do not thing I will get to much into detail as to why this is as there are a number of resources on the open web that outline why it is a good idea to go with request animation frame over that of the set interval or set time out methods. However there are still some situations in which set interval or set time out have to be used because it is an environment in which request animation frame is not there to work with. This is not just very old web browser that a hand full of people might still be using just because they do n it know better, this is also the case when doing something with web workers, or a nodejs script.
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 you tube 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.
When it comes to additional example that I have made that make use of an app loop I have mad a whole lot of canvas examples projects that might be worth checking out when it comes to this sort of thing. Many of the canvas examples projects that I have made for each post involve an app loop, although I am using request animation frame rater than set interval. Also an app loop is a major part of making a state machine, or some kind of game framework. When it comes to game frameworks I have one project that I have started thus far which I am putting together something like that.