Timing is Everything

In today’s post, I would like to touch on another JavaScript timing function…setInterval(). You use setInterval to call a function/run some code over and over for a specified period of time. Let’s look at an example…

[code lang=”js”]
// Create a function to call and run the code over and over
function someFunction() {
// Function runs the setInterval method. This will run the alert code
// over and over every 3 seconds
setInterval(function(){
alert("setInterval is running!");
}, 3000); // 3000 milliseconds = 3 seconds
}
[/code]

You can also pass a function to the setInterval() rather than have the functionality within the method itself…

[code lang=”js”]
// Create a variable to hold the setInterval call var someVar;
function someFunction() {
// Call setInterval method to run myFunc every 3 seconds
someVar = setInterval(myFunc, 3000);
}
// myFunc to run alert
function myFunc() {
alert("setInterval is running!");
}
[/code]

This code does pretty much the same as the previous example, but what is nice about this is you can separate and encapsulate your code to make modification and maintenance easier.

Now, a question you might be asking is, “How do I stop it from running every three seconds?” JavaScript has a method for that…clearInterval(). Just call clear interval and pass the variable that is housing the setInterval call and it will stop. SO if I wish to stop the previous example, the code would be as follows…

[code lang=”js”]
// Stop the 3 second alert
clearInterval(someVar);
[/code]

Side note: If you wish to run a function through setInterval that requires parameters, you simply pass the parameters through the setInterval call…

[code lang=”js”]
// Example setInterval passing 2 parameters
setInterval(myFunc, 3000, param1, param2)
[/code]

Timing functionality is very helpful in certain situations. This one combined with the setTimeout() method, can allow you to have some automation within your program.

Happy Coding!

Clay Hess

More To Explore

Developer sitting outdoors at a coffer shop working on his laptop with colors swirling
Code

Exploring the CSS Paint API: Unlocking Creativity in Web Design

The web is constantly evolving, and with it, the tools available to developers and designers expand. One of the most exciting additions to modern web design is the CSS Paint API (also known as Houdini’s Paint API). This feature allows developers to create dynamic, programmatically generated images directly in CSS without the need for external assets or heavy graphical libraries.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.