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)?

The easiest way to run Javascript every second is to use the setInterval() function. For example:

  • function foo () { console.log("RUNNING"); }
  • setInterval(foo, 1000);

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

RUN JAVASCRIPT EVERY SECOND

All right, let us now get started with the examples on how to loop Javascript every second.

 

METHOD 1) INTERVAL TIMER

1-set-interval.html
<!-- (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

2-recursive.html
<!-- (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

3-async-loop.html
<!-- (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.

 

 

EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

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

 

INFOGRAPHIC CHEAT SHEET

Run Javascript Every Second (Click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *