HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
"I will finish later!
The examples used in the previous chapter, was very simplified.
The purpose of the examples was to demonstrate the syntax of callback functions:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
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().
When using the JavaScript function setTimeout(),
you can specify a callback function to be executed on time-out:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
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.
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:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
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.
When using the JavaScript function setInterval(),
you can specify a callback function to be executed for each interval:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
In the example above, 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.
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 an HTML file (mycar.html), and displays the HTML file in a web page,
after the file is fully loaded:
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();
}
getFile(myDisplayer);
In the example above, myDisplayer is used as a callback.
myDisplayer is passed to getFile() as an argument.
Below is a copy of 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>