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

JavaScript

The Event Loop, Tasks & Micro Tasks

About Me

What is JavaScript?

Stack Overflow

setTimeout()

Callback Queue

The Callback Queue

The Event Loop

The Event Loop

setTimeout(0)

Title Text

Microtasks

Microtasks

Browser Painting

Browser Painting

Demo

Conclusion

Conclusion

Questions?