Skip to content

Instantly share code, notes, and snippets.

@jesstelford

jesstelford/event-loop.md

Last active December 5, 2024 02:05
Show Gist options
  • Save jesstelford/9a35d20a2aa044df8bf241e00d7bc2d0 to your computer and use it in GitHub Desktop.
Save jesstelford/9a35d20a2aa044df8bf241e00d7bc2d0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jesstelford revised this gist Aug 2, 2017. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -265,3 +265,5 @@ Stack.
    Our program has now finished execution.

    End.

    _Note: It's also possible to [starve the event loop with Promises](https://gist.github.com/jesstelford/bbb30b983bddaa6e5fef2eb867d37678) via the "Microtask queue"_
  2. jesstelford revised this gist Feb 14, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -79,8 +79,8 @@ There are a different set of APIs like this available in node.
    }, 1000) | | | | |
    | | | | |
    ```
    `setTimeout` is then finished executing, while the Web API waits for the
    requested amount of time (1000ms).
    `setTimeout` is then finished executing; it has offloaded its work to the Web
    API which will wait for the requested amount of time (1000ms).

    ---

  3. jesstelford revised this gist Feb 14, 2017. No changes.
  4. jesstelford revised this gist Feb 14, 2017. No changes.
  5. jesstelford revised this gist Jun 21, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@ Given the code
    ```javascript
    setTimeout(() => {
    console.log('bye')
    }, 0)
    }, 2)
    someSlowFn()
    console.log('hi')
    ```
    @@ -252,7 +252,7 @@ the mimimum delay allowed in some cases_
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | |
    console.log('bye')| | | | |
    }, 0) | | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
  6. jesstelford revised this gist Jun 19, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,7 @@ It starts executing the code, and pushes that fact onto the Call Stack (here nam
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <global> | | | timeout, 1000 |
    > setTimeout(() => { | <global> | | | |
    console.log('hi') | setTimeout | | | |
    }, 1000) | | | | |
    | | | | |
  7. jesstelford revised this gist Jun 19, 2016. 2 changed files with 19 additions and 19 deletions.
    12 changes: 6 additions & 6 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -31,20 +31,20 @@ To start, everything is empty
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | |
    setTimeout(() => { | <global> | | | |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    It starts executing the code, and pushes that fact onto the Call Stack (I have
    arbitrarily chosen to call that `<main>`)
    It starts executing the code, and pushes that fact onto the Call Stack (here named
    `<global>`)

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | timeout, 1000 |
    > setTimeout(() => { | <global> | | | timeout, 1000 |
    console.log('hi') | setTimeout | | | |
    }, 1000) | | | | |
    | | | | |
    @@ -60,7 +60,7 @@ item popped off. Aka: Last In, First Out. (think; a stack of dishes)
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | timeout, 1000 |
    > setTimeout(() => { | <global> | | | timeout, 1000 |
    console.log('hi') | setTimeout | | | |
    }, 1000) | | | | |
    | | | | |
    @@ -74,7 +74,7 @@ There are a different set of APIs like this available in node.
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | timeout, 1000 |
    setTimeout(() => { | <global> | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    26 changes: 13 additions & 13 deletions starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -31,21 +31,21 @@ To start, everything is empty
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | |
    setTimeout(() => { | <global> | | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    It starts executing the code, and pushes that fact onto the Call Stack (I have
    arbitrarily chosen to call that `<main>`)
    It starts executing the code, and pushes that fact onto the Call Stack (here named
    `<global>`)

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | |
    > setTimeout(() => { | <global> | | | |
    console.log('bye')| setTimeout | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    @@ -58,7 +58,7 @@ arbitrarily chosen to call that `<main>`)
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | timeout, 2 |
    > setTimeout(() => { | <global> | | | timeout, 2 |
    console.log('bye')| setTimeout | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    @@ -71,7 +71,7 @@ arbitrarily chosen to call that `<main>`)
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | timeout, 2 |
    setTimeout(() => { | <global> | | | timeout, 2 |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    @@ -85,7 +85,7 @@ requested amount of time (2ms).
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | timeout, 2 |
    setTimeout(() => { | <global> | | | timeout, 2 |
    console.log('bye')| someSlowFn | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    @@ -100,7 +100,7 @@ complete. For that 300ms, JS can't remove it from the Call Stack
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function <-----timeout, 2 |
    setTimeout(() => { | <global> | function <-----timeout, 2 |
    console.log('bye')| someSlowFn | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    @@ -117,7 +117,7 @@ so the code to be executed by the timeout waits on the Event Loop for its turn.
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    setTimeout(() => { | <global> | function | | |
    console.log('bye')| someSlowFn | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    @@ -131,7 +131,7 @@ Still waiting for `someSlowFn` to finish...
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    setTimeout(() => { | <global> | function | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    @@ -144,7 +144,7 @@ Still waiting for `someSlowFn` to finish...
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    setTimeout(() => { | <global> | function | | |
    console.log('bye')| console.log | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    @@ -159,7 +159,7 @@ The next line is executed, pushing
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    setTimeout(() => { | <global> | function | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    @@ -184,7 +184,7 @@ We see `hi` output on the console thanks to `console.log`
    > hi
    ```

    Nothing left to execute, so the special `<main>` is popped off the Call Stack.
    Nothing left to execute, so the special `<global>` is popped off the Call Stack.

    ---

  8. jesstelford revised this gist Jun 19, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -231,7 +231,7 @@ the Call Stack.
    console.log('hi') | | | | |
    > hi
    > buy
    > bye
    ```

    Once finished executing, `bye` is printed, and `console.log` is removed from the
    @@ -257,7 +257,7 @@ the mimimum delay allowed in some cases_
    console.log('hi') | | | | |
    > hi
    > buy
    > bye
    ```
    Finally, there are no other commands to execute, so it too is taken off the Call
    Stack.
  9. jesstelford revised this gist Jun 19, 2016. 1 changed file with 14 additions and 1 deletion.
    15 changes: 14 additions & 1 deletion starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -128,6 +128,19 @@ Still waiting for `someSlowFn` to finish...

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    `someSlowFn` finally finished!

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    @@ -138,7 +151,7 @@ Still waiting for `someSlowFn` to finish...
    > console.log('hi') | | | | |
    ```

    `someSlowFn` finally finished, so the next line is executed, pushing
    The next line is executed, pushing
    `console.log` onto the Call Stack

    ---
  10. jesstelford revised this gist Jun 19, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -164,6 +164,7 @@ Call Stack.
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    > hi
    ```
    Finally, the function has no other commands to execute, so it too is taken off
    the Call Stack.
  11. jesstelford revised this gist Jun 19, 2016. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -229,6 +229,9 @@ requested the `setTimeout`. Meaning even though we asked for it to be executed
    after only 2ms, we still had to wait for the Call Stack to empty before the
    `setTimeout` code on the Event Loop could be executed

    _Note: Even if we didn't have `someSlowFn`, `setTimeout` is clamped to 4ms as
    the mimimum delay allowed in some cases_

    ---

    ```text
  12. jesstelford revised this gist Jun 19, 2016. 1 changed file with 31 additions and 7 deletions.
    38 changes: 31 additions & 7 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -31,13 +31,26 @@ To start, everything is empty
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | setTimeout | | | timeout, 1000 |
    setTimeout(() => { | <main> | | | |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    It starts executing the code, and pushes that fact onto the Call Stack (I have
    arbitrarily chosen to call that `<main>`)

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | timeout, 1000 |
    console.log('hi') | setTimeout | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Then the first line is executed. This pushes the function execution as the
    first item onto the call stack.
    second item onto the call stack.

    Note that the Call Stack is a _stack_; The last item pushed on is the first
    item popped off. Aka: Last In, First Out. (think; a stack of dishes)
    @@ -47,8 +60,8 @@ item popped off. Aka: Last In, First Out. (think; a stack of dishes)
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | setTimeout | | | timeout, 1000 |
    console.log('hi') | | | | |
    > setTimeout(() => { | <main> | | | timeout, 1000 |
    console.log('hi') | setTimeout | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    @@ -61,15 +74,26 @@ There are a different set of APIs like this available in node.
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | timeout, 1000 |
    setTimeout(() => { | <main> | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    `setTimeout` is then finished executing, while the Web API waits for the
    requested amount of time (1000ms).

    The Call Stack is empty now.
    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```

    As there are no more lines of JS to execute, the Call Stack is now empty.

    ---

    @@ -146,4 +170,4 @@ the Call Stack.

    Our program has now finished execution.

    End.
    End.
  13. jesstelford revised this gist Jun 19, 2016. 2 changed files with 259 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,11 @@
    # Regular Event Loop

    This shows the execution order given JavaScript's Call Stack, Event Loop, and
    any asynchronous APIs provided in the JS execution environment (in this example;
    Web APIs in a Browser environment)

    ---

    Given the code

    ```javascript
    251 changes: 251 additions & 0 deletions starved-event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,251 @@
    # Starved Event Loop

    Below is an example of how code running in the current Call Stack can prevent
    code on the Event Loop from being executed. aka; the Event Loop is _starved_.

    ---

    Given the code

    ```javascript
    setTimeout(() => {
    console.log('bye')
    }, 0)
    someSlowFn()
    console.log('hi')
    ```

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    To start, everything is empty

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    It starts executing the code, and pushes that fact onto the Call Stack (I have
    arbitrarily chosen to call that `<main>`)

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | |
    console.log('bye')| setTimeout | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    `setTimeout` is pushed onto the Call Stack

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | <main> | | | timeout, 2 |
    console.log('bye')| setTimeout | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    `setTimeout` triggers the timeout Web API

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | timeout, 2 |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    `setTimeout` is then finished executing, while the Web API waits for the
    requested amount of time (2ms).

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | | | timeout, 2 |
    console.log('bye')| someSlowFn | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```

    `someSlowFn` starts executing. Let's pretend this takes around 300ms to
    complete. For that 300ms, JS can't remove it from the Call Stack

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function <-----timeout, 2 |
    console.log('bye')| someSlowFn | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```
    Meanwhile, the timeout has expired, so the Web API lets JS know by adding code
    to the Event Loop.

    `someSlowFn` is still executing on the Call Stack, and cannot be interrupted,
    so the code to be executed by the timeout waits on the Event Loop for its turn.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    console.log('bye')| someSlowFn | | | |
    }, 2) | | | | |
    > someSlowFn() | | | | |
    console.log('hi') | | | | |
    ```

    Still waiting for `someSlowFn` to finish...

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    console.log('bye')| console.log | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    > console.log('hi') | | | | |
    ```

    `someSlowFn` finally finished, so the next line is executed, pushing
    `console.log` onto the Call Stack

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | <main> | function | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    > console.log('hi') | | | | |
    > hi
    ```

    We see `hi` output on the console thanks to `console.log`

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | function | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    > hi
    ```

    Nothing left to execute, so the special `<main>` is popped off the Call Stack.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | function <---function | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    > hi
    ```

    This frees up the JS execution environment to check the Event Loop for any code
    which needs to be executed.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | function | | | |
    > console.log('bye')| console.log | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    > hi
    ```
    Executing the function results in `console.log` being called, also pushed onto
    the Call Stack.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | function | | | |
    console.log('bye')| | | | |
    }, 2) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    > hi
    > buy
    ```

    Once finished executing, `bye` is printed, and `console.log` is removed from the
    Call Stack.

    Notice that by this point, it is at least 300ms _after_ the code originally
    requested the `setTimeout`. Meaning even though we asked for it to be executed
    after only 2ms, we still had to wait for the Call Stack to empty before the
    `setTimeout` code on the Event Loop could be executed

    ---

    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | |
    console.log('bye')| | | | |
    }, 0) | | | | |
    someSlowFn() | | | | |
    console.log('hi') | | | | |
    > hi
    > buy
    ```
    Finally, there are no other commands to execute, so it too is taken off the Call
    Stack.

    Our program has now finished execution.

    End.
  14. jesstelford revised this gist Jun 19, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ The Call Stack, Event Loop, and Web APIs have the following relationship
    ```text
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | timeout, 1000 |
    setTimeout(() => { | | | | |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
  15. jesstelford revised this gist Jun 19, 2016. 1 changed file with 55 additions and 55 deletions.
    110 changes: 55 additions & 55 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,24 +9,24 @@ setTimeout(() => {
    The Call Stack, Event Loop, and Web APIs have the following relationship

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|------------|
    setTimeout(() => { | | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    To start, everything is empty

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|------------|
    > setTimeout(() => { | setTimeout | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | setTimeout | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Then the first line is executed. This pushes the function execution as the
    first item onto the call stack.
    @@ -37,12 +37,12 @@ item popped off. Aka: Last In, First Out. (think; a stack of dishes)
    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    > setTimeout(() => { | setTimeout | | timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    > setTimeout(() => { | setTimeout | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Executing `setTimeout` actually calls out to code that is _not_ part of JS.
    It's part of a _Web API_ which the browser provides for us.
    @@ -51,12 +51,12 @@ There are a different set of APIs like this available in node.
    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | | | timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    `setTimeout` is then finished executing, while the Web API waits for the
    requested amount of time (1000ms).
    @@ -66,12 +66,12 @@ The Call Stack is empty now.
    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | | function <---timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | function <-----timeout, 1000 |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Once the timeout has expired, the Web API lets JS know by adding code to the
    Event Loop.
    @@ -85,12 +85,12 @@ item popped off. Aka: First In, First Out. (think; a queue for a movie)
    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function <---function | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | function <---function | | |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Whenever the Call Stack is empty, the JS execution environment occasionally checks
    to see if anything is Queued in the Event Loop. If it is, the first item is moved
    @@ -99,25 +99,25 @@ to the Call Stack for execution.
    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function | | |
    > console.log('hi') | console.log | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | function | | | |
    > console.log('hi') | console.log | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Executing the function results in `console.log` being called, also pushed onto
    the Call Stack.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | function | | | |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    > hi
    ```
    Once finished executing, `hi` is printed, and `console.log` is removed from the
    @@ -126,16 +126,16 @@ Call Stack.
    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    [code] | [call stack] | [Event Loop] | | [Web APIs] |
    --------------------|-------------------|--------------| |---------------|
    setTimeout(() => { | | | | |
    console.log('hi') | | | | |
    }, 1000) | | | | |
    | | | | |
    ```
    Finally, the function has no other commands to execute, so it too is taken off
    the Call Stack.

    Our program has now finished execution.

    End.
    End.
  16. jesstelford revised this gist Jun 19, 2016. 1 changed file with 9 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -31,8 +31,8 @@ To start, everything is empty
    Then the first line is executed. This pushes the function execution as the
    first item onto the call stack.

    Note that the Call Stack is a _stack_; The first item pushed on is the last
    item popped off. Aka: First In, Last Off. (think; a stack of dishes)
    Note that the Call Stack is a _stack_; The last item pushed on is the first
    item popped off. Aka: Last In, First Out. (think; a stack of dishes)

    ---

    @@ -80,7 +80,7 @@ It doesn't push onto the Call Stack directly as that could intefere with already
    executing code, and you'd end up in weird situations.

    The Event Loop is a _Queue_. The first item pushed on is the first
    item popped off. Aka: First In, First Off. (think; a queue for a movie)
    item popped off. Aka: First In, First Out. (think; a queue for a movie)

    ---

    @@ -92,16 +92,17 @@ item popped off. Aka: First In, First Off. (think; a queue for a movie)
    }, 1000) | | | |
    | | | |
    ```
    When the Call Stack is empty (in this case; immediately), the function is moved
    from the Event Loop onto the Call Stack for execution.
    Whenever the Call Stack is empty, the JS execution environment occasionally checks
    to see if anything is Queued in the Event Loop. If it is, the first item is moved
    to the Call Stack for execution.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function | | |
    > console.log('hi') | console.log('hi') | | |
    > console.log('hi') | console.log | | |
    }, 1000) | | | |
    | | | |
    ```
    @@ -135,4 +136,6 @@ Call Stack.
    Finally, the function has no other commands to execute, so it too is taken off
    the Call Stack.

    Our program has now finished execution.

    End.
  17. jesstelford revised this gist Jun 19, 2016. 1 changed file with 15 additions and 0 deletions.
    15 changes: 15 additions & 0 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -18,6 +18,8 @@ The Call Stack, Event Loop, and Web APIs have the following relationship
    ```
    To start, everything is empty

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|------------|
    @@ -32,6 +34,8 @@ first item onto the call stack.
    Note that the Call Stack is a _stack_; The first item pushed on is the last
    item popped off. Aka: First In, Last Off. (think; a stack of dishes)

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    @@ -44,6 +48,8 @@ Executing `setTimeout` actually calls out to code that is _not_ part of JS.
    It's part of a _Web API_ which the browser provides for us.
    There are a different set of APIs like this available in node.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    @@ -57,6 +63,7 @@ requested amount of time (1000ms).

    The Call Stack is empty now.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    @@ -75,6 +82,8 @@ executing code, and you'd end up in weird situations.
    The Event Loop is a _Queue_. The first item pushed on is the first
    item popped off. Aka: First In, First Off. (think; a queue for a movie)

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    @@ -86,6 +95,8 @@ item popped off. Aka: First In, First Off. (think; a queue for a movie)
    When the Call Stack is empty (in this case; immediately), the function is moved
    from the Event Loop onto the Call Stack for execution.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    @@ -97,6 +108,8 @@ from the Event Loop onto the Call Stack for execution.
    Executing the function results in `console.log` being called, also pushed onto
    the Call Stack.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    @@ -109,6 +122,8 @@ the Call Stack.
    Once finished executing, `hi` is printed, and `console.log` is removed from the
    Call Stack.

    ---

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
  18. jesstelford revised this gist Jun 19, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@ To start, everything is empty
    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|------------|
    > setTimeout(() => { | setTimeout | | |
    > setTimeout(() => { | setTimeout | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    @@ -35,7 +35,7 @@ item popped off. Aka: First In, Last Off. (think; a stack of dishes)
    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    > setTimeout(() => { | setTimeout | | timeout, 1000 |
    > setTimeout(() => { | setTimeout | | timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
  19. jesstelford created this gist Jun 19, 2016.
    123 changes: 123 additions & 0 deletions event-loop.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    Given the code

    ```javascript
    setTimeout(() => {
    console.log('hi')
    }, 1000)
    ```

    The Call Stack, Event Loop, and Web APIs have the following relationship

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|------------|
    setTimeout(() => { | | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    To start, everything is empty

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|------------|
    > setTimeout(() => { | setTimeout | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    Then the first line is executed. This pushes the function execution as the
    first item onto the call stack.

    Note that the Call Stack is a _stack_; The first item pushed on is the last
    item popped off. Aka: First In, Last Off. (think; a stack of dishes)

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    > setTimeout(() => { | setTimeout | | timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    Executing `setTimeout` actually calls out to code that is _not_ part of JS.
    It's part of a _Web API_ which the browser provides for us.
    There are a different set of APIs like this available in node.

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | | | timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    `setTimeout` is then finished executing, while the Web API waits for the
    requested amount of time (1000ms).

    The Call Stack is empty now.


    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | | function <---timeout, 1000 |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    Once the timeout has expired, the Web API lets JS know by adding code to the
    Event Loop.

    It doesn't push onto the Call Stack directly as that could intefere with already
    executing code, and you'd end up in weird situations.

    The Event Loop is a _Queue_. The first item pushed on is the first
    item popped off. Aka: First In, First Off. (think; a queue for a movie)

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function <---function | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    When the Call Stack is empty (in this case; immediately), the function is moved
    from the Event Loop onto the Call Stack for execution.

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function | | |
    > console.log('hi') | console.log('hi') | | |
    }, 1000) | | | |
    | | | |
    ```
    Executing the function results in `console.log` being called, also pushed onto
    the Call Stack.

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | function | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    > hi
    ```
    Once finished executing, `hi` is printed, and `console.log` is removed from the
    Call Stack.

    ```text
    [code] | [call stack] | [Event Loop] | [Web APIs] |
    --------------------|-------------------|--------------|---------------|
    setTimeout(() => { | | | |
    console.log('hi') | | | |
    }, 1000) | | | |
    | | | |
    ```
    Finally, the function has no other commands to execute, so it too is taken off
    the Call Stack.

    End.