JavaScript Timeouts
The setTimeout() Method
The setTimeout() method schedules a function to run after a delay in milliseconds.
It is an async operation used to delay code execution without freezing the browser.
Waiting for a Timeout
When using the setTimeout() method,
you can specify a function to be executed on time-out:
Example
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
In the example above, myFunction is passed to
setTimeout() as an argument.
3000 is the number of milliseconds before
myFunction will be called.
When you pass a function as an argument, remember not to use parenthesis.
Right: setTimeout(myFunction, 3000);
Wrong: setTimeout(myFunction(), 3000);
Instead of passing a function name as an argument to another function, you can always pass the whole function instead:
Example
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Waiting for Intervals:
When using the setInterval() method,
you can specify function to be executed for each interval:
Example
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
In the example above, myFunction is passed to setInterval() as an argument.
1000 is the number of milliseconds between every time
myFunction will be called.
Common Beginner Confusion
Example
myDisplayer("A");
setTimeout(function() {
myDisplayer("B");
}, 1000);
myDisplayer("C");
Try it Yourself »
The output from the above example is A C B.
Example
let result;
setTimeout(function() {
result = 5;
}, 1000);
// What is result here?
Try it Yourself »
Result is undefined because the async code has not finished yet.
Beginners expect async results immediately.
JavaScript Events
Events are actions or occurrences that happen in the browser, often triggered by user interactions (like clicks, keypresses, or form submissions) or by the browser itself (like page loading or resizing).
