How to Run Javascript Every Second (Simple Examples)

Welcome to a tutorial on how to run Javascript every second. So you want to loop a piece of code endlessly and have it fire up every second (or every X seconds)?

That covers the quick basics, but let us walk through a few actual examples in this guide. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

METHOD 1) INTERVAL TIMER

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
 
<script>
// (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
var showTime = () => {
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
};
 
// (C) START INTERVAL
var timer = setInterval(showTime, 1000);
// TO STOP - clearInterval(timer);
</script>

As in the introduction snippet:

• (B) Start by creating the function that you want to run every second. In this example, it is showTime().
• (C) Use setInterval(FUNCTION, DELAY) to create an interval timer. This will fire the given FUNCTION for every DELAY microsecond. I.E. 1000 ms is equal to 1 sec.

 

 

METHOD 2) RECURSIVE FUNCTION

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
  
 <script>
// (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
var showTime = () => {
  // (B1) UPDATE HTML
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
 
  // (B2) LOOP
  timer = setTimeout(showTime, 1000);
};
 
// (C) START!
var timer = setTimeout(showTime, 0);
// TO STOP - clearTimeout(timer);
</script>

Another simple trick that we use. Take extra note of (B2), the function sets itself on a 1-second timeout and calls itself recursively.

 

METHOD 3) INFINITE LOOP

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
 
<script>
// (B) RUN EVERY SECOND TO UPDATE TIME
var showTime = async () => { while (true) {
  // (B1) UPDATE CURRENT TIME
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;

  // (B2) WAIT FOR 1 SECOND
  await new Promise(resolve => setTimeout(resolve, 1000));
}};
 
// (C) START!
showTime();
</script>

Lastly, this is a funky “modern solution”.

• (B) The basic idea is to create an endless while (true) loop. But since this will block and “hang” the entire page, it can only be done in an async function().
• (B2) At the end of each cycle, we do an await new Promise(resolve => setTimeout(resolve, 1000)). This is kind of confusing, but it basically waits for 1 second before looping itself.

 

 

 

WHICH IS BETTER? WHICH IS CORRECT?

Personally, I prefer setInterval(). It is the most traditional method and easiest to understand. While some people may argue that the infinite async-while-function works better, because it runs in parallel – I will say, just pass an async function into setInterval() then. 🙄

 

LINKS & REFERENCES

• Set interval on MDN
• Set timeout on MDN
• Async function
• Await on MDN

 

INFOGRAPHIC CHEAT SHEET