Is There A Wait Function In JavaScript?

Question

I Would Like To Create A Wait Between Each document.getElementById(), The Goal Of The Web App Is When You Load It, It Will Begin The Timer At 5, Every Second It Will Go Down And At The End Display The Message Completed, I Can Not Find The Right Function To Do This, I Am Fairly New To JavaScript, So This Is Probably A Stupid Question To You,

My JavaScript Code

window.onload = function timer(){

document.getElementById("timer").innerHTML = "Timer - 5";

document.getElementById("timer").innerHTML = "Timer - 4";

document.getElementById("timer").innerHTML = "Timer - 3";

document.getElementById("timer").innerHTML = "Timer - 2";

document.getElementById("timer").innerHTML = "Timer - 1";

document.getElementById("timer").innerHTML = "Timer - Completed";

}

My HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer - Test</title>
    <link rel="shortcut icon" href="Resources/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>
<body>

    <div id="timer">
        
        Welcome

    </div>

</body>
</html>

Does this answer your question? [What is the JavaScript version of sleep()?](https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep) — lejlun, Aug 06 '21 at 16:33

score 0 · Answer 1 · answered Aug 06 '21 at 16:33

Use setInterval():

window.onload = function timer() {
  var time = 5;
  var t = setInterval(() => {
    if (time == -1) {
      clearInterval(t);
      return;
    } else if (time == 0) {
      document.getElementById("timer").innerHTML = "Timer - Completed";
      return;
    }
    document.getElementById("timer").innerHTML = "Timer - " + time;
    time--;
  }, 1000);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Timer - Test</title>
  <link rel="shortcut icon" href="Resources/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./index.css">
  <script src="./index.js"></script>
</head>

<body>
  <div id="timer">
    Welcome
  </div>
</body>

</html>

ulou · Answer 2 · 2021-08-06T16:38:56.470

setInterval is something you are looking for:

let timerId = null // it's id of our interval, we declaring it globally. Thanks to this we clear it (stop counting) when we need.

const startTimer = () => {
  let counter = 5
  timerId = setInterval(() => {
    document.getElementById("timer").innerHTML = 
      --counter ? `Timer ${counter}` : "Timer - Completed"
    if (counter === 0) clearInterval(timerId)
  }, 1000) // time in ms
}

window.onload = function timer(){
  startTimer() // we are starting our timer
}

window.destroy = function timer(){
  clearInterval(timerId) // this is important! You don't want to leave runnig interval while you will change page before it ends. 
}

<div id="timer">Welcome</div>

score 0 · Answer 3 · answered Aug 06 '21 at 16:33

setTimeout and setInterval are what can help you here.

For example:

window.onload = function timer(){
  document.getElementById("timer").innerHTML = "Timer - 5";
  setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 4", 1000);
  setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 3", 2000);
  setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 2", 3000);
  setTimeout(() => document.getElementById("timer").innerHTML = "Timer - 1", 4000);
  setTimeout(() => document.getElementById("timer").innerHTML = "Timer - DONE", 5000);
}

<div id="timer"></div>

There are other ways to implement this and improve the code, but this is the closest to the code you posted, so it should be easy to understand.

score 0 · Answer 4 · answered Aug 06 '21 at 16:35

You can use the setTimeout() method in JavaScript. It allows you to delay a function for a set amount of time. Using recursion, you can create a function that calls itself, like this:

window.onload = () => {
  const timer = document.getElementById("timer");

  const countdown = (time) => {
    // if time is up, return out of timer
    if (time === 0) {
      timer.innerHTML = "Timer - Completed";
      return;
    }

    // set timer value to the current time
    timer.innerHTML = `Timer - ${time}`;

    // call the function with a timeout of 1 second (1000 milliseconds)
    setTimeout(() => countdown(time - 1), 1000);
  }

  countdown(5);
}

Let me know if you have any questions!

score 0 · Answer 5 · answered Aug 06 '21 at 16:56

My favourite pattern is a recursive setTimeout.

function countdown() {

  // Cache the element
  const timer = document.getElementById("timer");

  // Initialise count
  function loop(count = 5) {

    // If count is 0 print the completed message
    if (!count) {
      timer.textContent = 'Timer - Completed';

    // Otherwise print the count and call the loop
    // again with a reduced count that gets passed
    // in as an argument
    } else {
      timer.textContent = `Timer - ${count}`;
      setTimeout(loop, 1000, --count);
    }
  }

  loop();

}

countdown();

<div id="timer" />

Is There A Wait Function In JavaScript?

5 Answers5