├── index.html
├── async.js
└── callback.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Asynchronous Javascript
8 |
9 |
10 | Welcome to Frontend 3 module!
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/async.js:
--------------------------------------------------------------------------------
1 | // Synchronous js
2 | console.log("hi");
3 | console.log("my name is suman");
4 | console.log("i'm a software dev");
5 |
6 | // Ansynchronous js
7 | setTimeout(() => {
8 | console.log("fetching pl data");
9 | }, 5000);
10 | setTimeout(() => {
11 | console.log("fetching mf data");
12 | }, 2000);
13 | setTimeout(() => {
14 | console.log("fetching health insurance data");
15 | }, 3000);
16 | // settimeout is a browser API
17 | // it's a method that allows you to execute a piece of code after a certain time has passed
18 | // Syntax: setTimeout(function, ms, param1, param2)
19 |
20 | function greeting(fname, sname) {
21 | console.log("Hello there!", fname, sname );
22 | }
23 | let timeoutId = setTimeout(greeting, 5000, "Suman", "Ghosh")
24 | //clearTimeout: it prevents the setTimeout() method from executing the function
25 | // Syntax: clearTimeout(id)
26 | // clearTimeout(timeoutId);
27 |
28 | // setTimeout(function greeting(name) {
29 | // console.log("Hello there!", name);
30 | // }, 5000, "name")
31 |
32 | // setTimeout((name) => {
33 | // console.log("Hello there!", name);
34 | // }, 5000, name)
35 |
36 | // setTimeout(greeting("Suman"), 5000)
37 | // the js will immediately execute the function without waiting, bcoz you're
38 | // passing a function call and not a function reference as the first param
39 |
40 |
41 | // Interview question:
42 | console.log("start");
43 | setTimeout(() => {
44 | console.log("set timeout func");
45 | }, 0)
46 | console.log("end");
--------------------------------------------------------------------------------
/callback.js:
--------------------------------------------------------------------------------
1 | // a callback function is a function which is:
2 | // - passed as an argument to another function
3 | // - invoked inside the outer function to which it is passed as an argument to complete some action
4 |
5 | // payment
6 | // order is placed/not
7 |
8 | // here, the order completion depends on the status of payment
9 |
10 | function orderPlaced(callGetPaymentStatus) {
11 | let result = callGetPaymentStatus();
12 | result ?
13 | console.log("payment successful, order has been placed") :
14 | console.log("payment failed, order could not be placed");
15 | }
16 |
17 | function getPaymentStatus() {
18 | return false;
19 | }
20 |
21 | orderPlaced(getPaymentStatus)
22 |
23 | // Creating our own ice cream parlour
24 | let stocks = {
25 | fruits: ['banana', "mango", "pineapple", "grapes"],
26 | holder: ["cone", "cup", "stick"],
27 | liquid: ["water", "ice"],
28 | toppings: ["choco chips", "sprinkles", "dry fruits"]
29 | }
30 |
31 | function order(fruitName, call_production) {
32 | setTimeout(function () {
33 | console.log(`${stocks.fruits[fruitName]} has been picked by customer`);
34 | call_production()
35 | }, 2000)
36 | }
37 |
38 | function production() {
39 | setTimeout(function () {
40 | console.log("production has started");
41 | setTimeout(function () {
42 | console.log("the fruits have been chopped");
43 | setTimeout(function () {
44 | console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`);
45 | setTimeout(function () {
46 | console.log("start the machine");
47 | setTimeout(function () {
48 | console.log(`ice cream is placed on ${stocks.holder[0]}`);
49 | setTimeout(function () {
50 | console.log(`${stocks.toppings[1]} added`);
51 | setTimeout(function () {
52 | console.log('serve the ice cream');
53 | }, 2000)
54 | }, 3000)
55 | }, 2000)
56 | }, 1000)
57 | }, 1000)
58 | }, 2000)
59 | }, 0000)
60 | }
61 |
62 | order(2,production)
63 |
--------------------------------------------------------------------------------