JS Callbacks

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 Callbacks

Function Sequence

The execution of JavaScript functions takes place in the sequence they are called. Not in the sequence they are defined.

This example ends up displaying “Goodbye”.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Function Sequence</h2>

<p>JavaScript functions are executed in the sequence they are called.</p>

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

<script>

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

}

function myFirst() {

  myDisplayer(“Hello”);

}

function mySecond() {

  myDisplayer(“Goodbye”);

}

myFirst();

mySecond();

</script>

</body>

</html>

Output

JavaScript Function Sequence

JavaScript functions are executed in the sequence they are called.

This example will end up displaying “Hello”.

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Function Sequence</h2>

<p>JavaScript functions are executed in the sequence they are called.</p>

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

<script>

function myDisplayer(some) {

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

}

function myFirst() {

  myDisplayer(“Hello”);

}

function mySecond() {

  myDisplayer(“Goodbye”);

}

mySecond();

myFirst();

</script>

</body>

</html>

Output

JavaScript Function Sequence

JavaScript functions are executed in the sequence they are called.

Hello

Sequence Control

There are times that you want to have better control over when to execute a function.

Let’s suppose that we 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

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Functions</h2>

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

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

<script>

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

</script>

</body>

</html>

Output

JavaScript Functions

Do a calculation and then display the result.

10

Or, you can call a calculator function (myCalculator), and let the calculator function call the display function (myDisplayer).

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(some) {

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

}

function myCalculator(num1, num2) {

  let sum = num1 + num2;

  myDisplayer(sum);

}

myCalculator(5, 5);

</script>

</body>

</html>

Output

JavaScript Callbacks

Do a calculation and then display the result.

10

JavaScript Callbacks

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

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

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.

10/p>