Asynchronous and Synchronous Code in Javascript Explained

I had a hard time at first understanding what people were trying to explain to me when learning this subject, but I eventually was able to wrap my mind around it with the help of YouTubers and instructors and good old-fashioned drawing it out by hand.

Now let's get started!!!

Okay so what I have come to understand at the most basic, basic level of what asynchronous vs. synchronous code is as follows:

Synchronous code is code we do now.

Asynchronous code is code we do later.

Code that automatically makes a task asynchronous are:

setInterval functions, setTimeout functions, EventListeners, and callback functions

These are just a few, but the most common.

Now imagine that as your computer looks through your lines of code, it asks your code one question: Do you want me to do this now or later?

As it asks that questions it creates two different lists of tasks to run. A now list, and a later list.

And after the lists are done being created — THEN it goes through and executes the tasks themselves starting with the NOW list.

When it gets to the NOW list it goes in order. It will invoke the first function, then the second, then the third, on down the line for as far as the list goes.

When it gets to the LATER list, things are a little different.

Asynchronous code runs all of the code at pretty much the same time. All of the code is running at the same speed too. In this example — what determines who finishes first is NOT THE ORDER OF THE CODE but how long it takes for the code to run.

To further drive this point home, let me use an analogy of runners in a race. Imagine that all and I mean ALL of the LATER functions are Usain Bolt.

This is not where Usain Bolt is function one and some other regular guy is another function and so one for all the rest of the functions. ALL OF THE LATER FUNCTIONS ARE USAIN BOLT. Meaning that the speed of each function is running at the SAME SPEED. The difference as to which one ends has to do with how long you are telling the function to run.

All of these setTimeout functions are set to timers. The first is set to go off in 3 seconds, the second set to go off in 8 seconds and the third is set to go off in 5 seconds. The computer does not go — Execute function 1, then function 2, then function 3. It goes — whoever finishes first wins, no matter the order!

So who wins has to do with where you placed the finish line!

Another way of showing the difference between synchronous code and asynchronous code I found here at phpmind.com, which I also think is a great way of explaining the difference.

Don’t forget — the order of the Asynchronous code that will be executed, according to this diagram is Function 2, then Function 4, then Function 3, then Function 1.

Another website that slows down the process of your code is this one here: http://latentflip.com/loupe/?code=CiAgICBjb25zb2xlLmxvZygxKTsgCiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uIHNlY29uZHM4KCl7Y29uc29sZS5sb2coMil9LCA4MDAwKTsgCiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uIHNlY29uZHMxKCl7Y29uc29sZS5sb2coMyl9LCAxMDAwKTsgCiAgICBjb25zb2xlLmxvZyg0KTs%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

When you go to the link above, there will automatically be a video that will explain the concepts that I have already expounded on above, but here you can put your own code in and see slowed down what is happening to your code.

I hope this helped someone. If anything it helped me. Good luck coding!