Using JavaScript to Run a Function Every 5 seconds

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:

  

  
Change color every 5 seconds
  
Stop background color change

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:

Full Code:

  

  
Change color every 5 seconds
  
Stop background color change

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