When writing synchronous code: <\/strong><\/p>\n\n\n\n
- We run one instruction after another <\/li><\/ul>\n\n\n\n
When running asynchronous code:<\/strong><\/p>\n\n\n\n
- We allow asynchronous functions to run in the background (such as setTimeout() functions or functions which take a longer time to process)<\/li>
- We pass callbacks to these functions which run once the function finished whatever work it was doing<\/li>
- We continue with the execution of the code immediately. This is means that the code is non-blocking.<\/li><\/ul>\n\n\n\n
Basically we can use callback functions to push actions into the future so that the code becomes non-blocking.<\/p>\n\n\n\n
But how does this work? Let me try to explain what happens in the event loop, and try some “art” while I’m at it.<\/p>\n\n\n\n
What happens behind the scenes of javascript?<\/p>\n\n\n\n
The event loop is part of what happens behind the scenes of javascript when functions and events (like DOM events) happen. <\/p>\n\n\n\n
Let’s define the structure of the Javascript Runtime. The Javascript Runtime is where the code is executed when we run it.
The Javascript Runtime is made out of:<\/p>\n\n\n\n- The Execution Stack<\/li>
- Web APIs<\/li>
- The Message Queue<\/li>
- The Event Loop<\/li><\/ol>\n\n\n\n
It is important to understand how each piece works and how they work together so we can execute asynchronous javascript.<\/p>\n\n\n\nJust a quick reminder, below there there is my asynchronous javascript code with which I will explain how the event loop works:<\/p>\n\n\n\n
const two= () => {\n console.log(2);\n}\n\nconst go = () => {\n console.log(1);\n two();\n console.log(3);\n}\n\ngo();<\/code><\/pre>\n\n\n\nHere’s a representation of the Javascript Runtime with the execution stack, web APIs, the callback queue and the even loop. Let’s go through this code instruction by instruction and see how it looks like.<\/p>\n\n\n\n
First up when the program initializes, the execution stack will contain only the global execution context.<\/p>\n\n\n\n
At the begining of the program, we just have the initial phase setup.<\/figcaption><\/figure>\n\n\n\n The go function is called so it is added on the stack<\/figcaption><\/figure>\n\n\n\n Next, the first log call is added to the stack (logging 1)<\/figcaption><\/figure>\n\n\n\n After it is executed, the execution context of the first console.log call is popped from the stack.<\/figcaption><\/figure>\n\n\n\n The next instruction is added, a call to the two() function<\/figcaption><\/figure>\n\n\n\n The two function call the setTimeout() function which is added to the stack.<\/figcaption><\/figure>\n\n\n\n Here it gets interested because the setTimeout() will start a timer and pass a callback which is stored in the Web APIs.<\/figcaption><\/figure>\n\n\n\n Once the timer started and the callback was passed, the call to the setTimeout and consequently the call of the two() function are both popped from the stack.<\/figcaption><\/figure>\n\n\n\n While the timer is still running, the final call to the console.log from the go() function is added to the execution stack and sequentally executed. This is why the output is 1 3 so far, as the call to log 2 is still waiting for the timer to expire.<\/figcaption><\/figure>\n\n\n\n After the console.log(3) call is executed, it is popped from the stack. Since there are no more instructions in the go() function, the go() execution context is also popped from the execution stack.<\/figcaption><\/figure>\n\n\n\n Now that the timer has expired, the callback passed in the setTimeout() function is added to the callback queue first. It will wait there until the execution stack is empty to give it a chance to be moved to the stack.<\/figcaption><\/figure>\n\n\n\n Since the execution stack is now empty, the callback passed with the timer is placed on the execution stack<\/figcaption><\/figure>\n\n\n\n The call to console.log(2) is added to the stack and executed.<\/figcaption><\/figure>\n\n\n\n Afterwards the console.log(2) and the execution context of the callback passed by the timer are both popped from the stack and the code execution is finished.<\/figcaption><\/figure>\n\n\n\n This was a very basic example of how the event loop works with asynchronous code. If you want to know how more complex code would act, you can draw your own diagrams, but it will follow the same procedure, just at a different scale. <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous post we saw a simple example of asynchronous javascript code. Let’s dive deeper into the subject and see what happens in the event loop in the case of asynchronous code. Recap on the main difference between synchronous and asynchronous code:When writing synchronous code: We run one instruction after another When running asynchronous code: We allow asynchronous functions to run in the background (such as setTimeout() functions or functions which take a longer time to process) We pass callbacks to these functions which run once the function finished whatever work it was doing We continue with the execution <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,10],"tags":[],"_links":{"self":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/posts\/157"}],"collection":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":0,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"wp:attachment":[{"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danwritescode.com\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}