Taking Some Time (Out) to Explain setTimeout and setInterval in JavaScript

So, I started writing this blog because these functions were a bit confusing and had no idea what I was doing when I used them. SO, what a better way to learn than to write a blog post about them and attempt to understand, am I right?

Okay, so the two functions we’re going to break down today are setTimeout and setInterval.

setTimeout

setTimeout is essentially a timer that runs another function after a certain amount of delay in milliseconds. The notation looks as follows:

setTimeout(callbackFunction, delay in number of milliseconds)

As an example we’re going to build out a simple page that has a disappearing message. Let’s say we want the page to load with a welcome message at the top that will disappear after 2 seconds.

Alright, so right now we’ve got a super simple web page made with basic HTML and CSS (learn more about CSS in my previous blog post here). I’ve got this red banner at the top of the page welcoming a user to the website. I’d like it to be on the page for 2 seconds, and then disappear. Time to do some JavaScript.

document.addEventLister('DOM Content Loaded', clearWelcomeMessage())
function clearWelcomeMessage(){
  let welcome = document.querySelector('#welcome')
  welcome.classList.add("hidden")
}

First things first: create an event listener for when the DOM content has loaded that calls on a clearWelcomeMessage function, that, well, clears the welcome message. I use querySelector to find the element with the id of “message” and I add a classList of “hidden” to it, which has CSS stylings that will hide that element from the browser. Let’s test that out in the browser and see if that works:

Great! Now, how do we make it so this function isn’t called until 2 seconds after the page loads? This is when the setTimeout function comes in handy. Using the clearWelcomeMessage as the first parameter and 2000 as the second (2000 milliseconds = 2 seconds), I add setTimeout into my event listener like so:

document.addEventListener('DOM Content Loaded', setTimeout(clearWelcomeMessage, 2000))

And that is success! Super basic implementation of course, but this starts to give you an idea of how the function works and ways to implement it in your own applications.

Now, what if we want to be even more obnoxious and have the welcome message flashing on the screen? That is when the setInterval function comes in handy.

setInterval

The difference between setTimeout and setInterval is that setTimeout only runs the callback function one time. On the other hand, setInterval will run continuously, invoking that callback function every certain number of milliseconds.

This time, I have created a function called flashWelcomeMessage. It looks at the welcome message element, and sees if it has a class name of “hidden”. If it does, it removes it. If not, it adds it. I then add flashWelcomeMessage as an argument inside the setInterval function, with the second argument of 1000. That way, the flashWelcomeMessage function will run every 1000 milliseconds (or 1 second). Let’s look at the results:

document.addEventListener('DOM Content Loaded', setInterval(flashWelcomeMessage, 1000))
function flashWelcomeMessage(){
  let welcome = document.querySelector('#welcome')
  if (welcome.classList.contains('hidden')) {
    welcome.classList.remove('hidden')
  } else {
    welcome.classList.add('hidden')
  }
}

How wonderfully obnoxious! But this function truly comes in handy, particularly if you’re trying to create any sort of stopwatch or timer on your application.

clearTimeout and clearInterval

If you would like to stop further calls, clearTimeout and clearInterval are corresponding functions for setTimeout and setInterval, respectively. To use them with have to give the original set function a variable name, and call on that variable name as the argument of our clear function, as seen below:

let timeout = setTimeout(clearWelcomeMessage, 2000)
clearTimeout(timeout)
let interval = setInterval(flashWelcomeMessage, 1000)
clearInterval(interval)

And there we have it! This is just the beginning of my understanding of these functions, and I hope as I continue to learn I will update the blog accordingly. I also highly recommend checking out the official documentation for setTimeout and setInterval at MDN. Happy coding!