In this video.
Let's see how synchronous programming works.
So before we get back to visualize the code, let's have some diagrams to explore more about how synchronous
programming works.
So let's say that we want to go for dinner at a certain restaurant.
So for this particular restaurant, we have only one cook who serves all his or her customers.
So in programming or in JavaScript, we will regard the cook as a threat because a threat manages or
the code execution.
So in context of the restaurant, it is the cook who is going to manage all his or her customers.
So let's say that first customer jumps in to order food after a couple of minutes.
Another one also jump in and jump in and start.
First come, first serve techniques.
That's what I refer to as synchronous programming.
So let's take it that in programming these customers are functions to be called by in context of the
restaurant, they are customers to be served and each of these customers have their time to be saved.
So let's say that, well, these customers, they all have their receipts at your hand before you be
saved unless you handle your receipt to the cook before the cook will serve you.
And let's say that each customer is they have different food to be ordered.
Let's say the first customer wants to order a hamburger and a second customer also want to order pizza
and a third customer also want to order tea.
So looking at this one, which of these food will be hard or take time to cook?
So let's say that the first one who wants to order hamburger, it takes 50 minutes to cook and likewise
it takes 10 minutes to cook and for tea it takes 3 minutes to cook.
So looking at this, you can see that unless the first customer is being saved before the second customer
will be also saved.
By looking at this, the last customer who want to order tea, it takes only 3 minutes to be saved.
But this customer will wait until the first customer and a second customer is being saved before he
or she can be served.
And this is not good or ideal.
So let's see the process involved here.
Well, the first customer handled his receipt to the cook, and I can see that the cook is busy cooking
and going to take, let's say, 15 minutes before it finished cooking.
So why is it cooking?
The other customers are still waiting in the queue.
Right then after 50 minutes, then the customer is being served and he or she is gone.
Then the second customer, who takes 10 minutes to cook, also handed his receipt to the cook to start
preparing his food for him, whilst the 3 minutes guy or customer over here is still waiting in the
queue because for synchronous it is first come, first serve.
So let's see.
So after 10 minutes, now it's gone.
Now it's time for 3 minutes.
Well, so the 3 minutes customer also gives receipt 3 minutes very fast.
It's finished.
Now everybody is happy eating.
So you could see the effect of synchronous programming, right?
The next video, let's have a look at asynchronous programming.
But let's get back to visual, see the code and read code to demonstrate what asynchronous programming
code is all about.
So back to visual.
The code as usual, I have a folder called async asynchronous programming for short and inside I have
two files, my index and my JavaScript file and inside my HTML just connected my JavaScript with each
one as that.
So let's get to the JavaScript file and here we go.
Great.
So now we are going to write a code that blocks other code from running and remember console.log is
a function.
So I'm going to use that one to just demonstrate.
So let's say my first function in console.log.
Let's say by.
Hamburger as we discuss in the diagram.
And then I can copy this one, copy this one and paste it three times.
The first one was buying pizza.
And a third one was by tee.
Is that okay?
So if I save this one, it uses what is called first come first technique.
So have a look.
You can see that I now have the order first come first save technique.
So we see that the hamburger was first followed by the pizza and then followed by the T.
That is the flow.
Now let's write some code to delay the execution of one of these functions.
So let's say that before my t get executed I want to select this and I let is a window object or method
that is accessible.
So for the alert it displaces a dialog inside the browser until it is a click, whether okay or cancel
before it can proceed to the other function to be called.
So for this one, let's say.
Work on.
Wait for me.
Like that.
When I say it now, we say that we have a dialogue like that until I click on, okay, my code down
here is not going to run.
We see that the first one runs.
The first one runs as that and the second one runs at that and the third one also runs as that.
But the third one or the fourth one is don't run.
It could say that it is loading over here.
It's taking time for it to finish executing until I click.
Okay, then my spinning will be off, meaning that function has finished executing.
Then it can move to the fourth code.
So now let's click on the okay and see.
Now we see that now we have what our byte being displayed.
That's what you call blocking code.
Now you know what is synchronous code in this video.
Let's start with asynchronous programming or code for short.