Java Script Async

Previous Next

JavaScript Callbacks

"I will call back later!"

A callback is a function passed as an argument to another function

This technique allows a function to call another function

A callback function can run after another function has finished

Function Sequence

JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.

This example will end up displaying "Goodbye":

Example

function myFirst() {
myDisplayer("Hello");
}

function mySecond() {
myDisplayer("Goodbye");
}

myFirst();
mySecond();

Try it now

This example will end up displaying "Hello":

Example

function myFirst() {
myDisplayer("Hello");
}

function mySecond() {
myDisplayer("Goodbye");
}

mySecond();
myFirst();

Try it now

Sequence Control

Sometimes you would like to have better control over when to execute a function.

Suppose you want to do a calculation, and then display the result.

You could call a calculator function (myCalculator), save the result, and then call another function (myDisplayer) to display the result:

Example

function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}

let result = myCalculator(5, 5);
myDisplayer(result);

Try it now

Or, you could call a calculator function (myCalculator), and let the calculator function call the display function (myDisplayer):

Example

function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}

myCalculator(5, 5);

Try it now

The problem with the first example above, is that you have to call two functions to display the result.

The problem with the second example, is that you cannot prevent the calculator function from displaying the result.

Now it is time to bring in a callback.

JavaScript Callbacks

A callback is a function passed as an argument to another function.

Using a callback, you could call the calculator function (myCalculator) with a callback, and let the calculator function run the callback after the calculation is finished:

Example

function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

Try it now

In the example above, myDisplayer is the name of a function.

It is passed to myCalculator() as an argument.

When you pass a function as an argument, remember not to use parenthesis.

Right: myCalculator(5, 5, myDisplayer);

Wrong: ~~myCalculator(5, 5, myDisplayer())~~;

When to Use a Callback?

The examples above are not very exciting.

They are simplified to teach you the callback syntax.

Where callbacks really shine are in asynchronous functions, where one function has to wait for another function (like waiting for a file to load).

Practice Excercise Practice now

Asynchronous JavaScript

"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

Try it now

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 now

In the example above, myFunction is used as a callback.

The function (the function name) is passed to setTimeout() as an argument.

3000 is the number of milliseconds before time-out, so myFunction() will be called after 3 seconds.

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 now

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() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}

Try it now

In the example above, myFunction is used as a callback.

The function (the function name) is passed to setInterval() as an argument.

1000 is the number of milliseconds between intervals, so myFunction() will be called every second.

Waiting for Files

If you create a function to load an external resource (like a script or a file), you cannot use the content before it is fully loaded.

This is the perfect time to use a callback.

This example loads a HTML file (mycar.html), and displays the HTML file in a web page, after the file is fully loaded:

Waiting for a File:

Try it now

In the example above, myDisplayer is used as a callback.

The function (the function name) is passed to getFile() as an argument.

Below is a copy of mycar.html:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">

<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels.</p>

<p>(Wikipedia)</p>

Practice Excercise Practice now

JavaScript Promises

"I Promise a Result!"

"Producing code" is code that can take some time

"Consuming code" is code that must wait for the result

A Promise is a JavaScript object that links producing code and consuming code

JavaScript Promise Object

A JavaScript Promise object contains both the producing code and calls to the consuming code:

Promise Syntax

When the executing code obtains the result, it should call one of the two callbacks:

Result	Call
Success	myResolve(result value)
Error	myReject(error object)

Promise Object Properties

A JavaScript Promise object can be:

Pending
Fulfilled
Rejected

The Promise object supports two properties: state and result.

While a Promise object is "pending" (working), the result is undefined.

When a Promise object is "fulfilled", the result is a value.

When a Promise object is "rejected", the result is an error object.

myPromise.state	myPromise.result
"pending"	undefined
"fulfilled"	a result value
"rejected"	an error object

You cannot access the Promise properties state and result.

You must use a Promise method to handle promises.

Promise How To

Here is how to use a Promise:

myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);

Promise.then() takes two arguments, a callback for success and another for failure.

Both are optional, so you can add a callback for success or failure only.

Example

Try it now

JavaScript Promise Examples

To demonstrate the use of promises, we will use the callback examples from the previous chapter:

Waiting for a Timeout
Waiting for a File

Waiting for a Timeout

Example Using Callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}

Try it now

Example Using Promise

Try it now

Waiting for a file

Example using Callback

Try it now

Example using Promise

Try it now

Practice Excercise Practice now

JavaScript Async

"async and await make promises easier to write"

async makes a function return a Promise

await makes a function wait for a Promise

Async Syntax

The keyword async before a function makes the function return a promise:

Example

async function myFunction() {
return "Hello";
}

Is the same as:

async function myFunction() {
return Promise.resolve("Hello");
}

Here is how to use the Promise:

myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);

Example

async function myFunction() {
  return "Hello";
}
myFunction().then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Try it now

Or simpler, since you expect a normal value (a normal response, not an error):

Example

async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);

Try it now

Await Syntax

The keyword await before a function makes the function wait for a promise:

let value = await promise;

The await keyword can only be used inside an async function.

Example

Let's go slowly and learn how to use it.

Basic Syntax

async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
myResolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

Try it now

Waiting for a Timeout

async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

Try it now

Waiting for a File

async function getFile() {
  let myPromise = new Promise(function(myResolve, myReject) {
    let req = new XMLHttpRequest();
    req.open('GET', "mycar.html");
    req.onload = function() {
      if (req.status == 200) {myResolve(req.response);}
      else {myResolve("File not Found");}
    };
    req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}

getFile();

Try it now

Browser Support

ECMAScript 2017 introduced the JavaScript keywords async and await.

The following table defines the first browser version with full support for both:

Chrome 55	Edge 15	Firefox 52	Safari 11	Opera 42
Dec, 2016	Apr, 2017	Mar, 2017	Sep, 2017	Dec, 2016

Practice Excercise Practice now

Previous Next

Java Script Async

JavaScript Callbacks

Function Sequence

Example

Example

Sequence Control

Example

Example

JavaScript Callbacks

Example

When to Use a Callback?

Asynchronous JavaScript

Asynchronous JavaScript

Example

Waiting for a Timeout

Example

Example

Waiting for Intervals:

Example

Waiting for Files

Waiting for a File:

JavaScript Promises

JavaScript Promise Object

Promise Syntax

Promise Object Properties

Promise How To

Example

JavaScript Promise Examples

Waiting for a Timeout

Example Using Callback

Example Using Promise

Waiting for a file

Example using Callback

Example using Promise

JavaScript Async

Async Syntax

Example

Example

Example

Await Syntax

Example

Basic Syntax

Waiting for a Timeout

Waiting for a File

Browser Support

COMPANY

Products

OTHERS

Partner