JS Asynchronous

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JS Asynchronous

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Callbacks</h2>

<p>Do a calculation and then display the result.</p>

<p id=”demo”></p>

<script>

function myDisplayer(something) {  document.getElementById(“demo”).innerHTML = something;

}

function myCalculator(num1, num2, myCallback) {

  let sum = num1 + num2;

  myCallback(sum);

}

myCalculator(5, 5, myDisplayer);

</script>

</body>

</html>

Output

JavaScript Callbacks

Do a calculation and then display the result.

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

It is passed to myCalculator() as an argument.

In the real world, callbacks are often used with asynchronous functions.

A typical example is JavaScript setTimeout().

Waiting for a Timeout

Using the JavaScript function setTimeout(), you can define a callback function to be executed on time-out.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id=”demo”></h1>

<script>

setTimeout(myFunction, 3000);

function myFunction() {

document.getElementById(“demo”).innerHTML = “Hello !!”;

}

</script>

</body>

</html>

Output

JavaScript Callback

Wait 3 seconds (3000 milliseconds) for this page to change.

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.

Instead of passing the name of a function as an argument to another function, you can pass a whole function instead.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript SetTimeout()</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id=”demo”></h1>

<script>

setTimeout(function() { myFunction(“Hello !!!”); }, 3000);

function myFunction(value) {

 document.getElementById(“demo”).innerHTML = value;

}

</script>

</body>

</html>

Output

JavaScript SetTimeout()

Wait 3 seconds (3000 milliseconds) for this page to change.

Waiting for Intervals

When using the JavaScript function setInterval(), you can specify a callback function to be executed for each interval:

Example

<!DOCTYPE html>

<html>

<body>

<h1>JavaScript setInterval()</h1>

<p>Using setInterval() to display the time every second (1000 milliseconds).</p>

<h2 id=”demo”></h2>

<script>

setInterval(myFunction, 1000);

function myFunction() {

let d = new Date();

document.getElementById(“demo”).innerHTML=

  d.getHours() + “:” +

  d.getMinutes() + “:” +

  d.getSeconds();

}

</script>

</body>

</html>

Output

JavaScript setInterval()

Using setInterval() to display the time every second (1000 milliseconds).

In the above example, 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.

Waiting for Files

To 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 is used to load an HTML file (mycar.html), and displays the HTML file on a web page after the file is fully loaded.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Callbacks</h2>

<p id=”demo”></p>

<script>

function myDisplayer(some) {

 document.getElementById(“demo”).innerHTML = some;

}

function getFile(myCallback) {

  let req = new XMLHttpRequest();

  req.open(‘GET’, “mycar.html”);

  req.onload = function() {

    if (req.status == 200) {

      myCallback(this.responseText);

    } else {

      myCallback(“Error: ” + req.status);

    }

  }

  req.send();

}

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

myDisplayer 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>

getFile(myDisplayer);

</script>

</body>

</html>