JavaScript

The Event Loop, Tasks & Micro Tasks

Paul McBride

@ThePaulMcBride

About Me

I started my career in the RAF
I'm self/community taught
5 years experience
Lead Developer at Niice

What is JavaScript?

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

printSquare()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

printSquare()

squared()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

printSquare()

squared()

multiply()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

printSquare()

squared()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

printSquare()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

main()

function multiply(x, y) {
    return x * y
}

function square(n) {
    return multiply(n, n)
}

function printSquare(n) {
    const squared = square(n)
    console.log(squared)
}

printSquare(3)

Stack Overflow

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

blowTheStack()

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

blowTheStack()

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

blowTheStack()

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

blowTheStack()

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

blowTheStack()

function blowTheStack() {
    blowTheStack()
}

blowTheStack()

blowTheStack()

setTimeout()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

hello()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

hello()

log()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

hello()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

futureLog()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

futureLog()

setTimeout()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

futureLog()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

world()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

world()

log()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

world()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

log()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        1000
    )
}

hello()
futureLog()
world()

Callback Queue

The Callback Queue

Array-like structure
Stores callbacks/tasks
Chronological order

The Event Loop

Efficient while loop
Key to async JavaScript
Processes callbacks/tasks

setTimeout(0)

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

hello()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

hello()

log()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

hello()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

futureLog()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

futureLog()

setTimeout()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

futureLog()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

world()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

world()

log()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

world()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

main()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

log()

function hello() {
    console.log('Hello')
}

function world() {
    console.log('World')
}

function futureLog {
    setTimeout(
        () => console.log('goodbye'),
        0
    )
}

hello()
futureLog()
world()

Title Text

Microtasks

Similar to tasks
Processed to completion
Promises are microtaks

Browser Painting

Rerendering Webpage
May happen between tasks
Only happens when it needs to

Demo

Conclusion

Execute Stack - First Task
Opportunity to repaint
Process all microtasks
Process first task
Repeat

Questions?

JavaScript -The Event Loop, Tasks and Micro Tasks

By Paul McBride

JavaScript -The Event Loop, Tasks and Micro Tasks

The event loop in JavaScript is an important part of how it handles asynchronous tasks. Understand how it works and you'll have a better idea of how JavaScript works.