Tutorials Exercises Services Get Certified Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++
Asynchronous JavaScript
‹ Previous Next ›
"I will finish later!"
Functions running in parallel with other functions are called asynchronous
A good example is JavaScript setTimeout()
Asynchronous JavaScript
The examples used in the previous chapter, was very simplified.
The purpose of the examples was to demonstrate the syntax of callback functions:
Example
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 1 of 7
:
Try it Yourself »
In the example above, myDisplayer is the name of a function.
It is passed to myCalculator() as an argument.
In the real world, callbacks are most often used with asynchronous functions.
A typical example is JavaScript setTimeout() .
Waiting for a Timeout
When using the JavaScript function setTimeout() , you can specify a callback function
to be executed on time-out:
Example
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
Try it Yourself »
In the example above, myFunction is used as a callback.
myFunction is passed to setTimeout() as an argument.
3000 is the number of milliseconds before time-out, so myFunction() will be called
after 3 seconds.
Note
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 2 of 7
:
When you pass a function as an argument, remember not to use parenthesis.
Right: setTimeout(myFunction, 3000);
Wrong: setTimeout(myFunction(), 3000);
Instead of passing the name of a function as an argument to another function, you can
always pass a whole function instead:
Example
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Try it Yourself »
In the example above, function(){ myFunction("I love You !!!"); } is used
as a callback. It is a complete function. The complete function is passed to setTimeout()
as an argument.
3000 is the number of milliseconds before time-out, so myFunction() will be called
after 3 seconds.
ADVERTISEMENT
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 3 of 7
:
Waiting for Intervals:
When using the JavaScript function setInterval() , you can specify a callback
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();
}
Try it Yourself »
In the example above, myFunction is used as a callback.
myFunction is passed to setInterval() as an argument.
1000 is the number of milliseconds between intervals, so myFunction() will be called
every second.
Callback Alternatives
With asynchronous programming, JavaScript programs can start long-running tasks,
and continue running other tasks in parallel.
But, asynchronus programmes are difficult to write and difficult to debug.
Because of this, most modern asynchronous JavaScript methods don't use callbacks.
Instead, in JavaScript, asynchronous programming is solved using Promises instead.
Note
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 4 of 7
:
You will learn about promises in the next chapter of this tutorial.
‹ Previous Next ›
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
ADVERTISEMENT
COLOR PICKER
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 5 of 7
:
ADVERTISEMENT
PLUS SPACES GET CERTIFIED
FOR TEACHERS FOR BUSINESS CONTACT US
Top Tutorials Top References
HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
FORUM ABOUT ACADEMY
W3Schools is optimized for learning and training. Examples might be simplified to
improve reading and learning.
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 6 of 7
:
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms
of use, cookie and privacy policy.
Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by
W3.CSS.
https://www.w3schools.com/js/js_asynchronous.asp 02/11/2024, 11 01 AM
Page 7 of 7
:
