parent
ff000c87ed
commit
802b84ad79
2 changed files with 36 additions and 0 deletions
@ -0,0 +1,26 @@ |
|||||||
|
The Event loop has two main components: the Call stack and the Callback queue. |
||||||
|
|
||||||
|
## Call Stack |
||||||
|
|
||||||
|
The Call stack is a data structure that stores the tasks that need to be executed. It is a LIFO (Last In, First Out) data structure, which means that the last task that was added to the Call stack will be the first one to be executed. |
||||||
|
|
||||||
|
## Callback Queue |
||||||
|
|
||||||
|
The Callback queue is a data structure that stores the tasks that have been completed and are ready to be executed. It is a FIFO (First In, First Out) data structure, which means that the first task that was added to the Callback queue will be the first one to be executed. |
||||||
|
|
||||||
|
## Event Loop's Workflow: |
||||||
|
|
||||||
|
1. Executes tasks from the Call Stack. |
||||||
|
2. For an asynchronous task, such as a timer, it runs in the background. JavaScript proceeds to the next task without waiting. |
||||||
|
3. When the asynchronous task concludes, its callback function is added to the Callback Queue. |
||||||
|
4. If the Call Stack is empty and there are tasks in the Callback Queue, the Event Loop transfers the first task from the Queue to the Call Stack for execution. |
||||||
|
|
||||||
|
```js |
||||||
|
setTimeout(() => console.log('Hello from the timer'), 0); |
||||||
|
console.log('Hello from the main code'); |
||||||
|
``` |
||||||
|
|
||||||
|
1. `setTimeout` is processed, and because it's asynchronous, its callback is placed in the Callback Queue. |
||||||
|
2. The next line, `console.log("Hello from the main code")`, is logged immediately. |
||||||
|
3. Although the timer duration is 0 milliseconds, its callback has to wait until the Call Stack is empty. After the main code logs, the callback is moved from the Callback Queue to the Call Stack and executed. |
||||||
|
4. The result is "Hello from the main code" being logged before "Hello from the timer". |
Loading…
Reference in new issue