 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT

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);

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:
 Tutorials 
Example
Exercises  Services   Spaces Get Certified My W3Schools

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT
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
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.

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()
Tutorials  + ":"
Exercises
+  Services   Spaces Get Certified My W3Schools
d.getMinutes() + ":" +
HTML
 CSS JAVASCRIPT
d.getSeconds(); SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT
}

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
You will learn about promises in the next chapter of this tutorial.

❮ Previous Next ❯
 Tutorials  Exercises  Services   Spaces Get Certified My W3Schools

HTML
 CSS
 SPACES
JAVASCRIPT SQL
UPGRADE
PYTHON JAVA
AD-FREE
PHP
NEWSLETTER
HOW TO W3.CSS
GET CERTIFIED
C C++ C# BOOTSTRAP REACT

CONTACT US

Top Tutorials Top References Top Examples

HTML Tutorial HTML Reference HTML Examples
CSS Tutorial CSS Reference CSS Examples
JavaScript Tutorial JavaScript Reference JavaScript Examples
How To Tutorial SQL Reference How To Examples
SQL Tutorial Python Reference SQL Examples
Python Tutorial W3.CSS Reference Python Examples
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples
Bootstrap Tutorial PHP Reference Bootstrap Examples
PHP Tutorial HTML Colors PHP Examples
Java Tutorial Java Reference Java Examples
C++ Tutorial Angular Reference XML Examples
jQuery Tutorial jQuery Reference jQuery Examples

Get Certified
HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

    

FORUM ABOUT CLASSROOM

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
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.