DEV Community

Cover image for Using setTimeout in JavaScript
Chris Bongers
Chris Bongers

Posted on • Updated on • Originally published at daily-dev-tips.com

Using setTimeout in JavaScript

When working with JavaScript, there will be a point where you'll want to wait a certain amount of time to run a function.

This can be to animate something after a specific time, for instance.

For instance, in this copy text to clipboard script, we use a timeout to change the text back to what it was before.

JavaScript setTimeout function

In it's most basic form the function looks like this:

setTimeout(() => {
  // Run after 100 milliseconds
}, 100);
Enter fullscreen mode Exit fullscreen mode

You see, the number 100 refers to the milliseconds it will wait to run.

As you can see, the basic example uses an arrow functions array that will be invoked.
You can also pass your function in the following way.

const coolFunc = () => {
  console.log('do a trick');
};

setTimeout(coolFunc, 200);
Enter fullscreen mode Exit fullscreen mode

And again, this will do the same as the above one.

But let's say your function takes parameters. We can even do that with this setup.

const coolFunc = (name, age) => {
  console.log(`Hi ${name} you are ${age} years old?`);
};

setTimeout(coolFunc, 200, 'Chris', 32);
Enter fullscreen mode Exit fullscreen mode

As you can see, the props are passed after the timeout parameter.

I see you thinking!
What will happen when we set the time to 0?

Good question, and it will be executed immediately.

But! This will only be invoked after all the other functions finish, even if they come later in the script.

setTimeout(() => {
  console.log('zero wait timeout');
}, 0);

console.log('first');

const otherFunction = () => {
  console.log('The other function');
};

otherFunction();
Enter fullscreen mode Exit fullscreen mode

Which will result in:

  • first
  • The other function
  • zero wait timeout

So as you can see, the setTimeout, even though it has zero milliseconds, will only fire last.

Cancel the setTimeout function

There are these times where you might want to abort the timeout you had planned.

We can define the timeout as a function, which gives us the option to clear it.

const timer = setTimeout(() => {
  console.log(`I'll explode! 💣`);
}, 2000);

clearTimeout(timer);
Enter fullscreen mode Exit fullscreen mode

Oef, luckily this bomb didn't go off! 👀

And there you go, we covered all the basics of the setTimeout function.

If you are keen to see some more real-world examples, here is a list of articles using them.

Or you can check out this CodePen and have a play with it.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (7)

Collapse
saramaman profile image
Saram Aman • Edited on

Hey sir, thank you for sharing your knowledge,
I always try to use this function but most of time it does not works, so I use setInterval method instead of that one

Collapse
swasdev4511 profile image
Swastik Upadhye

It is beacause setTimeout doesnt guarantee to executre exactly after given time... It means minimum this much time is required...to check this add a settimeout with 500ms.. And then add a for loop that takes 5 sec to eexcute...and check whether the handler in setTimeout executes first or not

Collapse
dailydevtips1 profile image
Chris Bongers Author

Hi Saram,

What does not work when using this function?
I actually just published one on setInterval today:
daily-dev-tips.com/posts/javascrip...

Collapse
saramaman profile image
Saram Aman

Yeah, setTimeout method
BTW, I read your blog, which is very informative

Collapse
surajitshaw profile image
SURAJITSHAW

If you add explanation about event loop it'll be very useful, otherwise it just make a whole lot confussion.

That's my thoughts on that 🙁

Collapse
dailydevtips1 profile image
Chris Bongers Author

Sorry for that, will link this one: dev.to/dailydevtips1/javascript-re...

Which is more around the loops

Collapse
surajitshaw profile image
SURAJITSHAW

Thanks for sharing 🙌, it'll be more helpful