1
00:00:00,390 --> 00:00:01,530
In this video.

2
00:00:01,530 --> 00:00:10,050
Let's talk about asynchronous programming or multi-threaded or non blocking code.

3
00:00:10,350 --> 00:00:14,760
In the previous video we talked about asynchronous programming.

4
00:00:14,760 --> 00:00:17,250
So let's see the differences between them.

5
00:00:20,590 --> 00:00:27,700
Again, we are going to use the same restaurant scenario to explain what is asynchronous programming

6
00:00:27,820 --> 00:00:29,770
for this kind of programming.

7
00:00:29,770 --> 00:00:36,170
Let's see if it's going to favor our best friend who is really hungry over here online.

8
00:00:36,190 --> 00:00:37,060
Synchronous.

9
00:00:37,060 --> 00:00:42,730
He suffered because it took time before it gets him to save only 3 minutes.

10
00:00:42,730 --> 00:00:44,890
T So let's see, it's come around.

11
00:00:45,010 --> 00:00:45,460
All right.

12
00:00:45,460 --> 00:00:52,000
So for asynchronous programming, it uses what is called multithreaded, meaning it's not using one

13
00:00:52,000 --> 00:00:54,640
thread who manages the execution of a code.

14
00:00:54,640 --> 00:01:01,120
So for this particular restaurant, we assume that even though we have one server or one cook here,

15
00:01:01,120 --> 00:01:05,140
but behind the scene they have what, multiple cook?

16
00:01:05,140 --> 00:01:07,960
That's what you call maybe a ghost cook or whatever.

17
00:01:07,960 --> 00:01:12,730
So you see where we got this multithreaded from in the upcoming video.

18
00:01:12,730 --> 00:01:17,890
So for now, I take it that we have more Cook who is serving these customers.

19
00:01:17,890 --> 00:01:19,840
So let's see how it's going to work.

20
00:01:19,840 --> 00:01:20,440
Great.

21
00:01:20,440 --> 00:01:28,840
So the first time all the customers handle their receipts to the cook, so the receipt now becomes our

22
00:01:28,840 --> 00:01:30,580
function for execution.

23
00:01:30,850 --> 00:01:37,450
So the cook will look, okay, now I have the first one, then the cook will start with the hamburger

24
00:01:37,450 --> 00:01:39,070
first with the recipes.

25
00:01:39,070 --> 00:01:43,900
So after that let's take it that now this is our recipe for hamburger.

26
00:01:43,930 --> 00:01:45,520
Now it took him ahead.

27
00:01:45,520 --> 00:01:48,220
Let's say a minute to add all the recipes.

28
00:01:48,220 --> 00:01:50,110
Now it's time to cook.

29
00:01:50,110 --> 00:01:56,080
So at this point, this hamburger over here will be put here while it is cooking.

30
00:01:56,170 --> 00:01:56,710
Right.

31
00:01:56,710 --> 00:02:00,640
So why is cooking it to go ahead and take the next receipt.

32
00:02:00,700 --> 00:02:01,810
We take 10 minutes.

33
00:02:01,810 --> 00:02:04,870
And also, let's say that this is our pizza over here.

34
00:02:04,870 --> 00:02:07,870
This is 10 minutes and this is also 15 minutes.

35
00:02:08,050 --> 00:02:09,610
So what's preparing?

36
00:02:09,610 --> 00:02:10,270
Wow.

37
00:02:10,270 --> 00:02:14,500
This cook isn't waiting for it to finish before going to pizza.

38
00:02:14,530 --> 00:02:16,150
Likewise this one.

39
00:02:16,150 --> 00:02:18,520
What it is waiting for 10 minutes to cook.

40
00:02:18,520 --> 00:02:23,260
Then the cook also takes in the last receipt, which is for the tea.

41
00:02:23,650 --> 00:02:27,280
So the tea is that it is only 3 minutes now.

42
00:02:27,280 --> 00:02:29,290
The three also yet to be prepared.

43
00:02:29,290 --> 00:02:31,060
The tea will be here as that.

44
00:02:31,390 --> 00:02:34,840
So why they are all waiting to be saved or cooked.

45
00:02:34,870 --> 00:02:37,600
Now let's see which one cook first.

46
00:02:37,690 --> 00:02:42,450
Well, we see that we have the tea, we take 3 minutes.

47
00:02:42,450 --> 00:02:49,450
So after it cooking, then to handle the tea to the first one which has finished cooking, then that

48
00:02:49,450 --> 00:02:52,210
person will be out of the queue.

49
00:02:52,300 --> 00:02:59,200
So it will say that the tea took only 3 minutes to be served so that person is gone, right?

50
00:02:59,200 --> 00:03:04,480
So while these two are still waiting, which of these one will cook first now?

51
00:03:04,480 --> 00:03:08,650
Indeed it'll be Pizza Guy and lastly, Hamburger Guy.

52
00:03:08,650 --> 00:03:10,960
And they are all ready to be saved.

53
00:03:11,260 --> 00:03:14,590
So this is how asynchronous programming also works.

54
00:03:14,590 --> 00:03:22,690
So let's get back to visualize the code and explain more how this one works before I show you how asynchronous

55
00:03:22,690 --> 00:03:29,200
code words or how you can write, let me show you what is called set time out.

56
00:03:29,200 --> 00:03:35,440
I believe for this one to talk about before by let's see the syntax and let's see how it works before

57
00:03:35,440 --> 00:03:37,480
we write the actual code.

58
00:03:37,510 --> 00:03:44,500
So a set timeout is a function that will be called at some point in time in the future.

59
00:03:44,620 --> 00:03:47,890
So it delays function execution.

60
00:03:47,950 --> 00:03:49,240
And here we go.

61
00:03:49,270 --> 00:03:55,810
You will type in such timeout and say built in function from our browsers and we'll talk more about

62
00:03:55,810 --> 00:03:57,190
how this one works.

63
00:03:57,190 --> 00:03:59,590
So this is what you call DOM APIs.

64
00:03:59,590 --> 00:04:00,100
Great.

65
00:04:00,100 --> 00:04:01,960
Don't worry, we get it very soon.

66
00:04:01,960 --> 00:04:04,270
So for this one, it's a function.

67
00:04:04,720 --> 00:04:08,950
And next is we pass in a callback function at the first argument.

68
00:04:08,950 --> 00:04:12,850
So here we can use normal function or every function.

69
00:04:12,850 --> 00:04:14,470
The choice is yours.

70
00:04:14,470 --> 00:04:16,690
So let's use normal function for this.

71
00:04:17,260 --> 00:04:25,690
And this is a callback because we are passing a function as an element to a function so we can say that

72
00:04:25,690 --> 00:04:30,220
set timeout is h0f meaning high or function.

73
00:04:30,220 --> 00:04:36,490
Do you remember on the advanced sections of JavaScript we discuss what is called high or the functions

74
00:04:36,490 --> 00:04:39,190
and functions as first class citizen.

75
00:04:39,460 --> 00:04:43,330
So for this particular function, it takes two arguments.

76
00:04:43,330 --> 00:04:51,100
One is a callback, and the next argument is the time I want to delay or the time I want to call this

77
00:04:51,100 --> 00:04:51,760
function.

78
00:04:51,760 --> 00:04:57,220
And it is in milliseconds if you want once again going to be 1000 milliseconds.

79
00:04:57,250 --> 00:05:01,660
If you want 2 seconds going to be 2000 milliseconds for this one.

80
00:05:01,660 --> 00:05:07,270
Let's say that I want to call my function inside this callback after 3 seconds.

81
00:05:07,270 --> 00:05:13,360
Now inside my function body here I can console.log anything I can call a function.

82
00:05:13,360 --> 00:05:17,080
I can do whatever I want in this particular callback function.

83
00:05:17,080 --> 00:05:20,110
For the meantime, let's console.log.

84
00:05:20,330 --> 00:05:21,470
Let's say.

85
00:05:22,880 --> 00:05:25,110
I'm cold when I say it.

86
00:05:25,130 --> 00:05:28,220
Let me comment this one out here when I save it.

87
00:05:28,220 --> 00:05:31,400
Let's count 3 seconds before this function be called.

88
00:05:31,400 --> 00:05:32,480
So save it.

89
00:05:32,720 --> 00:05:35,720
One, two, three.

90
00:05:35,930 --> 00:05:36,380
Yes.

91
00:05:36,380 --> 00:05:37,100
Now I was five.

92
00:05:37,130 --> 00:05:37,520
See that?

93
00:05:37,520 --> 00:05:38,420
Now we have.

94
00:05:38,420 --> 00:05:41,060
I'm called after 3 seconds.

95
00:05:41,510 --> 00:05:46,130
So we can also create a function up here, let's say comes.

96
00:05:47,060 --> 00:05:48,780
Let's say message.

97
00:05:48,810 --> 00:05:55,250
Going to be a function this time around and let's console.log let's say.

98
00:05:56,280 --> 00:05:59,220
How are you like that?

99
00:05:59,250 --> 00:06:05,430
So if I save this one, I want to call my message function after 3 seconds.

100
00:06:05,430 --> 00:06:08,550
So I'll put it inside my set timeout.

101
00:06:08,550 --> 00:06:11,730
So I will say message and I'll call it.

102
00:06:11,730 --> 00:06:13,290
I'll start when I save it.

103
00:06:13,320 --> 00:06:16,710
Now after 3 seconds, you are going to see how are you?

104
00:06:16,710 --> 00:06:19,380
And indeed we have, how are you?

105
00:06:19,380 --> 00:06:24,180
And again, for this one to this sentence, we can read it in another way.

106
00:06:24,180 --> 00:06:29,670
So for set timeout like that and then callback function.

107
00:06:29,670 --> 00:06:37,230
As for this one, I can create my function outside and refer it inside my set timeout.

108
00:06:37,230 --> 00:06:42,090
So for this one I can remove this one and now I have a function here.

109
00:06:42,090 --> 00:06:48,090
I want to call our pass in to my set timeout as my message function.

110
00:06:48,090 --> 00:06:54,630
But for this one, you don't call it because you want the set timeout to call it.

111
00:06:54,630 --> 00:07:01,320
So if you do this way, it means you are calling the function by yourself, but you want the set timeout

112
00:07:01,320 --> 00:07:02,570
to call the function, right?

113
00:07:02,610 --> 00:07:03,690
So why are we calling?

114
00:07:03,930 --> 00:07:10,290
So for this one, we don't call the function as that, but we pass it as a normal variable or argument.

115
00:07:10,290 --> 00:07:12,720
The next one going to be the time to call.

116
00:07:12,720 --> 00:07:14,070
So 3 seconds.

117
00:07:14,070 --> 00:07:17,520
So this one is equally same as this one.

118
00:07:17,760 --> 00:07:23,190
So when I save it, let's count 1 to 3.

119
00:07:23,190 --> 00:07:24,570
And there we go.

120
00:07:24,580 --> 00:07:26,700
This what you call set timeout.

121
00:07:26,700 --> 00:07:33,330
So with this one in mind, we can use this idea to write asynchronous code.

122
00:07:33,330 --> 00:07:34,710
So let's see.

123
00:07:34,710 --> 00:07:37,410
So this is for my set timeout.

124
00:07:37,470 --> 00:07:41,850
Let me comment this one and let me comment this one out or parameter.

125
00:07:41,850 --> 00:07:50,640
Well, okay, let me copy this one here and then this one also here and let me comment this one out.

126
00:07:50,640 --> 00:07:53,130
Now this one, let's say async.

127
00:07:54,260 --> 00:07:58,360
Async code or write async code.

128
00:07:58,370 --> 00:08:00,110
Now, bring this one down here.

129
00:08:00,140 --> 00:08:01,280
Okay, good.

130
00:08:01,280 --> 00:08:02,160
So this one.

131
00:08:02,180 --> 00:08:04,670
Any of the way, it should be good to go.

132
00:08:05,090 --> 00:08:06,200
All right.

133
00:08:06,320 --> 00:08:08,030
Now, here we go.

134
00:08:08,060 --> 00:08:11,840
We have a function here which says, How are you?

135
00:08:11,870 --> 00:08:15,520
My first function call and let me console.log.

136
00:08:15,530 --> 00:08:24,500
Let's say as before, go to park and down here.

137
00:08:24,530 --> 00:08:28,640
Let's also go to bank as that.

138
00:08:28,640 --> 00:08:32,669
When I save this one, let's see the order that would be called.

139
00:08:32,690 --> 00:08:39,200
So based on the knowledge that we have, because JavaScript runs from top to bottom, it means that

140
00:08:39,200 --> 00:08:45,590
this function will call first and then get here, then it across my callback function, which is my

141
00:08:45,590 --> 00:08:48,550
message by this function take 3 minutes to be called.

142
00:08:48,560 --> 00:08:52,550
So it means that it's going to block this function to be called.

143
00:08:53,030 --> 00:08:55,370
So let's see what's going to happen over here.

144
00:08:55,370 --> 00:08:56,630
So when I save it.

145
00:08:56,660 --> 00:08:58,760
Now, moment of truth.

146
00:08:58,790 --> 00:08:59,930
Oh, let me save it here.

147
00:08:59,960 --> 00:09:02,340
Now, I have saved that address part.

148
00:09:02,360 --> 00:09:04,970
I have the other functions called.

149
00:09:04,970 --> 00:09:08,830
And after 3 seconds, I have my you.

150
00:09:09,100 --> 00:09:11,720
You could see that for this one.

151
00:09:11,720 --> 00:09:16,670
We have the first one function being called start and a second one.

152
00:09:16,700 --> 00:09:20,930
It got to a set amount, but that timeout has been called down here.

153
00:09:21,230 --> 00:09:24,320
And then we have this one also being called.

154
00:09:24,320 --> 00:09:26,780
We see that it being called concurrently.

155
00:09:26,780 --> 00:09:29,360
It doesn't wait other code from running.

156
00:09:29,450 --> 00:09:31,490
It's all because of what it called.

157
00:09:31,490 --> 00:09:33,740
Set timeout set timeout here.

158
00:09:34,070 --> 00:09:38,620
And it's possible because what is called event loop and a DOM API.

159
00:09:38,630 --> 00:09:44,570
And in this video, I'll prove to you how all this one works behind the scene.