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>