In this section, we will learn what the setTimeout() function is and how to use it in JavaScript.
What is JavaScript setTimeout()? (JavaScript Timer)
In programming, it happens that we want to run a set of instructions in the future time after the program starts to run. For example, we might want to run part of a program 15 minutes after a webpage loaded.
This is where the `setTimeout()` function can help.
The `setTimeout()` is a built in function that acts like a timer. We define a time for this function (in millisecond) as well as a reference to a function. When the specified amount of time passed, the target function that we’ve set for the `setTimeout` will be called by the execution engine to execute its body.
JavaScript setTimeout() Syntax:
setTimeout(function, time, parameter1, parameter2,…);
`function`: This is the target function that we want it to be executed after a specific amount of time passed.
`time`: We set the time as the second argument for this function.
Note: the time is in millisecond. Basically, one second is equal to 1000 milliseconds. So if we want to execute the target function after like 5 seconds, we need to set the second argument to 5000 milliseconds, which is equal to 5 seconds.
`parameter1, parameter2,…`: if the target function takes arguments as well, we can put those arguments after the second argument. So when the execution engine starts to execute the target function, it will pass these arguments to that function.
The return value of this function is an ID of type number that can be used in the `clearTimeout()` function to cancel the timer before its execution if we need to.
Example: delay function call in JavaScript using setTimeout function
function sayHi(name){
console.log(`Hello ${name}`);
}
setTimeout(sayHi, 5000, "John Doe");
Output:
Hello John Doe
When running this program, the execution engine will send the message `Hello John Doe` to the browser’s console after 5 seconds.
This is because we set the first argument of the `setTimeout` function to refer to the `sayHi` function. The second argument is set to `5000`. This means the execution of the function at minimum time should occur 5 seconds later. The last argument of the function `setTimeout` is an argument for the function `sayHi` when it is being invoked by the execution engine.
How Does JavaScript setTimeout() Function work?
The `setTimeout` is basically a web API. The API means `Application Programming Interface`. This means the `setTimeout` is the interface of a web-browser program and we use this function to communicate with that program.
One thing that you should know is that this program works independently from the JavaScript execution engine. This means the execution engine only calls this `setTimeout` function to signal the program behind this function to run; after that, the engine moves on to execute the rest of instructions in the main program.
So what does the program that is behind the `setTimeout` do?
It’s basically a timer. When we pass a `time` as the second argument of the `setTimeout` function, this time will be passed to that program and it makes the program to wait for that amount of time. At the end of the time, that program will send the reference-function that we set as the first argument for the `setTimeout` to the queue.
The Queue is a place that Web-APIs (including the `setTimeout`) send their request for the JavaScript execution engine to execute.
Basically, the execution engine has a stack of tasks already on its hands and working on it. So it might not be able to immediately respond to the requests of the Web-APIs. For this reason, there’s a queue in the browser that the Web-APIs send their request to that queue.
Now when the engine had no other instruction to run, it will check the queue via the `event loop` and bring the tasks in the queue to the stack to execute them one by one.
`Event Loop`: the event loop is simply the middleman between the stack and the queue. The execution engine uses the `event loop` to bring a task from the queue to the stack for the execution.
So because there might be a couple of tasks from other Web-APIs already in front of the setTimeout Web-API request in the queue, the execution of the reference-function might take longer amount of time than what we’ve declared.
JavaScript clearTimeout() Function: (Stop setTimeout in JavaScript)
We can stop a call to the setTimeout() function before it being executed. This is done via a call to the clearTimeout() function.
In the clearTimeout() function, we’ve explained this function in great details.
