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>