The function pass to another function as a parameter is known as callback function.This function may be executed immediately as in a synchronous callback, or it might happen at a later time as in an asynchronous callback.
JavaScript codes are executed line by line but the next line of code can be run even though the effect is not finished.
as we know JavaScript is only asynchronous in Ajax calls, functions calls, events etc.
EX1: Using jQuery
EX2: Using jQuery and simple javascript function
The cb parameter function will call from increment function after counter increase.
EX3: Using nodejs
from this example "continue next line" will run anytime but data will get step by step as file read.
From the above examples, we can say that callback function is most useful for manage synchronous process in javascript and nodejs.
JavaScript codes are executed line by line but the next line of code can be run even though the effect is not finished.
as we know JavaScript is only asynchronous in Ajax calls, functions calls, events etc.
EX1: Using jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var counter = $("#counter").html();
counter = parseInt(counter) + 1;
$("#counter").html(counter);
});
});
</script>
</head>
<body>
<button>Increase</button>
<div id="counter">0</div>
</body>
</html>
In the above simple jQery demo, the function is callback function of click function.<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var counter = $("#counter").html();
counter = parseInt(counter) + 1;
$("#counter").html(counter);
});
});
</script>
</head>
<body>
<button>Increase</button>
<div id="counter">0</div>
</body>
</html>
EX2: Using jQuery and simple javascript function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var current_counter = $("#counter").html();
increment(current_counter, function(new_counter){
$("#counter").html(new_counter);
});
});
var increment = function(current_counter, cb){
counter = parseInt(current_counter) + 1;
cb(counter);
};
});
</script>
</head>
<body>
<button>Increase</button>
<div id="counter">0</div>
</body>
</html>
in above example, on click button, click event called. after this, increment function will call with two parameters.first parameter passes current value and second is callback function.<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var current_counter = $("#counter").html();
increment(current_counter, function(new_counter){
$("#counter").html(new_counter);
});
});
var increment = function(current_counter, cb){
counter = parseInt(current_counter) + 1;
cb(counter);
};
});
</script>
</head>
<body>
<button>Increase</button>
<div id="counter">0</div>
</body>
</html>
The cb parameter function will call from increment function after counter increase.
EX3: Using nodejs
var fileSystem = require("fs");
fileSystem.readFile('myTextData.txt', function(error, data) {
if (error){
console.log(error);
}
console.log(data);
});
console.log("continue next line");
fileSystem.readFile('myTextData.txt', function(error, data) {
if (error){
console.log(error);
}
console.log(data);
});
console.log("continue next line");
from this example "continue next line" will run anytime but data will get step by step as file read.
From the above examples, we can say that callback function is most useful for manage synchronous process in javascript and nodejs.
No comments:
Post a Comment