setTimeout javascript – How the setTimeout() Method in JavaScript Works

The setTimeout() method in JavaScript will run a function or code after a set amount of milliseconds have passed.

setTimeout(function(){
  //Code that will run after 5000 milliseconds
}, 5000);

You can see in the code above that the setTimeout() method has the second parameter of 5000. This is how long (in milliseconds) the method will wait until running the function in the first parameter. In this case, it is 5000 milliseconds or 5 seconds.

Let’s say we want to run code that executes an alert box after 5 seconds. We can do this easily using the setTimeout method.

Here is the JavaScript code that can make this happen.

setTimeout(function(){
  alert("5 seconds have passed.")
}, 5000);

Let’s take a look at another example below.

Creating a Countdown Timer Using the setTimeout() Method

In this example, we will use the setTimeout() method to create a simple countdown timer that will display a message when finished. It will start when the user presses a button.

Here is the simple HTML setup:

<div id="div1">
  <div id="click-me" onclick="startCountdown()">Start Countdown</div>
  <div id="countdown-text"></div>
</div>

To make this countdown timer happen, we will use the setTimeout() method and the setInterval() method. We will use JavaScript to wait 5 seconds using the setTimeout() method. While we are waiting for the 5 seconds, we will provide the user with a countdown by using the setInterval() method. The setInterval() method will run every second until it is told to stop.

Inside the setInterval() method, we will run a function that runs every second. The function will display how many seconds remain in the countdown starting at 5 seconds. We will use the innerHTML property to update the text for the user.

We will end the setInverval() method using the clearInterval() method when our counter has reached 0.

Finally, in our setTimeout() method, once the 5 seconds is up, we will have an alert box alert the user that the timer is done. We will also add some code to make it so the user can’t run the countdown timer until it has completed its cycle.

Here is the JavaScript code:

//The variable below will just make it so the user cannot run the setTimeout method more than once at a time
var isSetTimmeoutRunning = false;
  
function startCountdown(){

  if( isSetTimmeoutRunning == false ){
    //We set this variable to true when we first run the setTimeout method.
    //It will get set back to false when the setTimeout method has completed
    isSetTimmeoutRunning = true;
    
    setTimeout(function(){
      isSetTimmeoutRunning = false;
      //Send alert message to the user
      alert("5 seconds have passed.");
    }, 5000);
    
    //The initial starting point of the counter, 5
    var counter = 5;
    
    document.getElementById("countdown-text").innerHTML = "<b>" + counter + "</b>";

    var interval = setInterval(function(){
      counter--;
      document.getElementById("countdown-text").innerHTML = "<b>" + counter + "</b>";
      if( counter == 0 ){
        document.getElementById("countdown-text").innerHTML = "";
        clearInterval(interval);
      }
    }, 1000);
  }
}

The final code and output for this example of how to create a countdown timer is below:

Code Output:

Full Code:

<div id="div1">
  <div id="click-me" onclick="startCountdown()">Start Countdown</div>
  <div id="countdown-text"></div>
</div>

<script>

var isSetTimmeoutRunning = false;  
function startCountdown(){
  if( isSetTimmeoutRunning == false ){
    isSetTimmeoutRunning = true;
    setTimeout(function(){
      isSetTimmeoutRunning = false;
      alert("5 seconds have passed.");
    }, 5000);
    var counter = 5;
    document.getElementById("countdown-text").innerHTML = "<b>" + counter + "</b>";
    var interval = setInterval(function(){
      counter--;
      document.getElementById("countdown-text").innerHTML = "<b>" + counter + "</b>";
      if( counter == 0 ){
        document.getElementById("countdown-text").innerHTML = "";
        clearInterval(interval);
      }
    }, 1000);
  }
}

</script>

Hopefully this article has been useful for you to understand how setTimeout() in JavaScript works.