JavaScript setTimeout() – How to Set a Timer in JavaScript or Sleep for N Seconds

This tutorial will assist you to apprehend how the built-in JavaScript approach setTimeout() works with intuitive code examples.

JavaScript setTimeout() – How to Set a Timer in JavaScript or Sleep for N Seconds

How to Use setTimeout() in JavaScript

The setTimeout() approach permits you to execute a piece of code after a sure quantity of time has passed. You can assume of the approach as a way to set a timer to run JavaScript code at a sure time.

For example, the code beneath will print "Hello World" to the JavaScript console after two seconds have passed:

setTimeout(function(){
console.log("Hello World");
}, 2000);

console.log("setTimeout() example...");

The code above will first print "setTimeout() example..." to the console, and then print "Hello World" as soon as two seconds have handed due to the fact the code has been achieved by means of JavaScript.

The setTimeout() approach syntax is as follows:

setTimeout(function, milliseconds, parameter1, parameter2, ...);

The first parameter of the setTimeout() technique is a JavaScript feature that you desire to execute. You can write the characteristic without delay when passing it, or you can additionally refer to a named feature as proven below:

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting);

Next, you can skip the milliseconds parameter, which will be the quantity of time JavaScript will wait earlier than executing the code.

One 2nd is equal to one thousand milliseconds, so if you prefer to wait for three seconds, you want to ignore 3000 as the 2nd argument:

function greeting(){
  console.log("Hello World");
}

setTimeout(greeting, 3000);

If you leave out the 2d parameter, then setTimeout() will right now execute the exceeded characteristic except waiting at all.

Finally, you can additionally ignore extra parameters to the setTimeout() approach that you can use internal the feature as follows:

function greeting(name, role){
  console.log(`Hello, my name is ${name}`);
  console.log(`I'm a ${role}`);
}

setTimeout(greeting, 3000, "Nathan", "Software developer");

Now you might also be thinking, "why now not simply ignore the parameters immediately to the function?"

This is due to the fact if you omit the parameters immediately like this:

setTimeout(greeting("Nathan", "Software developer"), 3000);

Then JavaScript will without delay execute the characteristic barring waiting, due to the fact you are passing a characteristic name and no longer a characteristic reference as the first parameter.

This is why if you want to pass by any parameters to the function, you want to omit them from the setTimeout() method.

But honestly, I in no way determined the want to ignore extra parameters to the setTimeout() approach in my function as a Software Developer, so do not fear about it

How to Cancel the setTimeout Method

You can additionally stop the setTimeout() technique from executing the feature by way of the use of the clearTimeout() method.

The clearTimeout() approach requires the identity lower back by way of setTimeout() to comprehend which setTimeout() approach to cancel:

clearTimeout(id);

Here's an instance of the clearTimeout() approach in action:

const timeoutId = setTimeout(function(){
    console.log("Hello World");
}, 2000);

clearTimeout(timeoutId);
console.log(`Timeout ID ${timeoutId} has been cleared`);

If you have a couple of setTimeout() methods, then you want to keep the IDs lower back with the aid of every approach name and then name clearTimeout() technique as many instances as wished to clear them all.

Read Also: How to Install Anaconda on Windows?

Conclusion

The JavaScript setTimeout() approach is a built-in approach that approves you to time the execution of a sure characteristic . You want to skip the quantity of time to wait for in milliseconds , which skill to wait for one second, you want to pass by one thousand milliseconds.

Read Also: Top 17 Interview Questions to Test debugging Skill of Java Programmers

To cancel a setTimeout() approach from running, you want to use the clearTimeout() method, passing the ID fee back when you name the setTimeout() method.

Thanks for studying this tutorial

If you choose to analyze extra about JavaScript, you may also prefer to test out my website online at sebhastian.com, the place I have posted over a hundred tutorials about programming with JavaScript, all the use of easy-to-understand explanations and code examples.

Read Also: 9 Best System Design Interview Courses for Beginners and Experienced Software Developers

The tutorials consist of String manipulation, Date manipulation, Array and Object methods, JavaScript algorithm solutions, and many more.