How to Have Javascript Function Continuously Run

We can use JavaScript to run a function every 5 seconds with the help of the setInterval() method.

          setInterval(function(){   //Code that will run every 5000 milliseconds or 5 seconds }, 5000);                  

In the code above, the setInterval() method will run the function in it's first parameter every 5000 milliseconds, or 5 seconds. We can change that parameter to be however often we want to execute the function call.

The code will loop forever in the set time interval unless it is cleared using the clearInterval() method.

A lot of the time, we will see an if conditional statement if the code above. Usually once a certain condition is met, we then will want to end the setInterval() method. We can do this by setting a variable to the setInterval method, var interval = setInterval() and then clearing it by using the clearInterval() method.

Running a Function Every 5 seconds with a Click

In this example, we will have a div with a background color. We will change the background color of the div every 5 seconds. We will provide the user with a button to start and stop the changing of the color.

Here is the simple HTML setup:

          <style>#div2 { width:300px; height: 200px; background: #7bbfa2; }</style> <div id="div1">   <div id="div2"></div>   <div id="click-me1" class="click-me" onclick="startBackground()">Change color every 5 seconds</div>   <div id="click-me2" class="click-me" onclick="stopBackground()">Stop background color change</div> </div>                  

In the JavaScript code, we will provide a button to let the user run the setInterval() method that will run a function every 5000 milliseconds, or 5 seconds. In the function, we will generate a random color with some JavaScript code. We will then change the background color of #div2 using the backgroundColor property.

We will then use an onclick event to run a stopBackground() function we create when the user clicks a button. This function will simply clear the timer of the setInterval() method we created. We do this by using the clearInterval() method.

Here is the JavaScript code:

                      //The variable below will just make it so the user cannot run the setInterval method more than once at a time var isSetTimmeoutRunning = false; var interval;  //Function to change background color every 5 seconds function startBackground(){   //We set this variable to true when we first run the setInterval method.   //It will get set back to false when the user clicks the stop button   isSetTimmeoutRunning = true;   interval = setInterval(function(){     //Create a random color     var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));        //Set the background of #div2 to this color     document.getElementById("div2").style.backgroundColor = randomColor;   }, 5000); }  //Our function to clear the setInterval() method above function stopBackground(){   clearInterval(interval);   isSetTimmeoutRunning = false; }                  

The final code and output for this example of using JavaScript to run a function every 5 seconds is below:

Code Output:

Change color every 5 seconds

Stop background color change

Full Code:

          <style>#div2 { width:300px; height: 200px; background: #7bbfa2; }</style> <div id="div1">   <div id="div2"></div>   <div id="click-me1" class="click-me" onclick="startBackground()">Change color every 5 seconds</div>   <div id="click-me2" class="click-me" onclick="stopBackground()">Stop background color change</div> </div>  <script>  var isSetTimmeoutRunning = false; var interval;  function startBackground(){   isSetTimmeoutRunning = true;   interval = setInterval(function(){     var randomColor = "#" + (Math.floor(Math.random()*16777215).toString(16));     document.getElementById("div2").style.backgroundColor = randomColor;   }, 5000); }  function stopBackground(){   clearInterval(interval);   isSetTimmeoutRunning = false; }  </script>                  

Hopefully this article has been useful for you to understand how to use JavaScript to run a function every 5 seconds.

About The Programming Expert

The Programming Expert is a compilation of a programmer's findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it's magic.

You can read more about us on our about page.

hinsonupecent.blogspot.com

Source: https://theprogrammingexpert.com/javascript-run-function-every-5-seconds/

Share this post