JavaScript – How to set a Timer with setTimeout()

Javascript

This tutorial will help you understand how built-in JavaScript methods work setTimeout() works with visual code examples.

How to use setTimeout() in JavaScript

The setTimeout() allows you to execute a piece of code after a certain amount of time has elapsed. You can think of this method as a way to set a timer to run JavaScript code at a certain time.

For example, the code below will print “Hello World” to the JavaScript console after 2 seconds have passed:

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

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

The above code will first print “setTimeout() example …” to the console, then print “Hello World” when two seconds have passed since the code has been executed by JavaScript.

The setTimeout() method syntax is as follows:

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

The first parameter of setTimeout() method is a JavaScript function that you want to do. You can write function directly when passing it, or you can also refer to a named function as shown below:

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

setTimeout(greeting);
The setTimeout() method uses the named function as its argument

Next, you can pass milliseconds parameter, is the amount of time JavaScript will wait before executing the code.

One second equals one thousand milliseconds, so if you want to wait for 3 seconds you need to pass 3000 as second argument:

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

setTimeout(greeting, 3000);
The setTimeout() method sleeps for 3 seconds

If you omit the second parameter, then setTimeout() will be done immediately function without waiting for anything.

Finally, you can also pass additional parameters to setTimeout() method that you can use inside function 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");
setTimeout() with additional parameters to the function

Now you might be thinking, “why not just pass the parameters to the function directly?”

This is because if you pass the parameters directly like this:

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

Then JavaScript will immediately execute function no need to wait, because you are passing call function and not a function reference as the first parameter.

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

But to be honest, I never saw the need to pass additional parameters to setTimeout() in my role of Software Developer so don’t worry about it

How to cancel setTimeout . method

You can also prevent setTimeout() execution method function using clearTimeout() method.

The clearTimeout() request method id returned by setTimeout() to know which setTimeout() method to cancel:

clearTimeout(id);
clearTimeout() syntax

Here is an example of clearTimeout() method in action:

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

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

If you have a lot setTimeout() methods, then you need to save the IDs returned by each method call and then call clearTimeout() method as many times as needed to clear them all.

Inference

JavaScript setTimeout() method is a built-in method that allows you to time the execution of a function . You need to get through the waiting period milliseconds means to wait a second you need to pass a thousand milliseconds.

To cancel a setTimeout() since run, you need to use clearTimeout() pass the ID value returned when you call setTimeout() method.

Hope this helps!

Source link

Share: