Introduction :
Function sequence: JavaScript functions are generally executed in the sequence in which they are called. Not in the sequence in which they are defined.
This example is going to end up displaying “Goodbye”:
Example:
Javascript Callback Function Example
function rimyFirst() {
rimyDisplayer("Hello");
}
function rimySecond() {
rimyDisplayer("Goodbye");
}
rimyFirst();
rimySecond();
Example:
function rimyFirst() {
rimyDisplayer("Hello");
}
function rimySecond() {
rimyDisplayer("Goodbye");
}
rimySecond();
rimyFirst();javascript callback function example
Sequence Control:
Sometimes you might like to have more control on when to execute a function.
Suppose if we want to do some calculation, and then want to display the result.
We can call some calculator function (rimyCalculator), then save the result, and then we can call another function (rimyDisplayer) for displaying the result:
Example:
function rimyDisplayer(risome) {
document.getElementById("demo").innerHTML = risome;
}
function rimyCalculator(rinum1, rinum2) {
let rsum = rinum1 + rinum2;
return rsum;
}let result = rimyCalculator(5, 5);
rimyDisplayer(result);
Or, we can call a calculator function (myCalculator), and after that let the calculator function to call the display function (rimyDisplayer):
Example:
function rimyDisplayer(risome) {
document.getElementById("demo").innerHTML = risome;
}
function rimyCalculator(rinum1, rinum2) {
let rsum = rinum1 + rinum2;
rimyDisplayer(rsum);
}javascript callback function example
rimyCalculator(5, 5);
The main problem with the 1st example above, is mainly that we have to call two functions for displaying the result.
The main problem with the 2nd example, is mainly that we cannot prevent the calculator function from it to display the result.
JavaScript Callbacks:
A callback can generally be considered to be a function that is allowed to be passed as an argument to some another function.
While using a callback, we will be able to call the calculator function (rimyCalculator) that will be with a callback (rimyCallback), and then we have to let the calculator function run the callback once the calculation is finished:
Example:
function rimyDisplayer(risome) {
document.getElementById("demo").innerHTML = risome;
}
function rimyCalculator(rinum1, rinum2, rimyCallback) {
let rsum = rinum1 + rinum2;
rimyCallback(rsum);
}rimyCalculator(5, 5, rimyDisplayer);
When can Callbacks come to use :-
Callbacks can generally be used when we use asynchronous functions where one function is supposed to wait for another function.
javascript callback function example