-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path34 Call Back in JS.html
101 lines (84 loc) · 4.29 KB
/
34 Call Back in JS.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<html lang="en">
<head><title>Call back in JS</title>
</head>
<body>
<!--
A callback is a function passed as an argument to another function
This technique allows a function to call another function
A callback function can run after another function has finished Execution
-->
<p id="TEXT"></p>
<p id="SUM"></p>
<script type="text/javascript">
//Function Sequence (before seeing examples of call back see these basic concepts)
/* JavaScript functions are executed in the sequence they are called.
Not in the sequence they are defined.
This example will end up displaying "JavaScript": */
function display(some){
document.getElementById("TEXT").innerHTML=some;
}
function myFirst(){
display("Hello");
}
function mysecond(){
display("JavaScript");
}
myFirst(); // here It will display : Hello
mysecond(); // but Value is now changed to : JavaScript
// now if i call myFirst() here again it will display Hello to the screen i.e they are executed in the
// sequence they are called i.e //myFirst();
//Sequence Control
/*Sometimes you would like to have better control over when to execute a function.
Suppose you 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
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);
Or, you could call a calculator function (myCalculator), and
let the calculator function call the display function (myDisplayer):
Example
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
The problem with the first example above, is that you have to
call two functions to display the result.
// The problem with the second example, is that you cannot prevent
the calculator function from displaying the result.*/
//Now it is time to bring in a callback.
/* JavaScript Callbacks:
A callback is a function passed as an argument to another function.
Using a callback, you could call the calculator function (myCalculator) with a callback,
and let the calculator function run the callback after the calculation is finished:*/
function result(some){
document.getElementById("SUM").innerHTML=some;
}
function calculator(num1, num2, callback){ //callback can be any name
let sum=num1+num2;
callback(sum); // in callback we have result function
}
calculator(6,7,result); // result function passed as argument to the calculator function
/* When you pass a function as an argument, remember not to use parenthesis.
Right: myCalculator(5, 5, myDisplayer);
Wrong: myCalculator(5, 5, myDisplayer()); */
</script>
<!-- When to Use a Callback?
The examples above are not very exciting.
They are simplified to teach you the callback syntax.
Where callbacks really shines are in asynchronous functions, where one function has to wait for another
function (like waiting for a file to load).
Asynchronous functions are covered in the next program. -->
</body>
</html>