Javascript

Event Loop

@carlosxjm

@frontendce

We're hiring

Insta: @kdti.dev
Github: @kdti
Site: http://kdti.dev

Por que devemos entender o Event Loop?

O que é Event Loop?

Task Queue

Call Stack

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

printSquare

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

printSquare

square

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

printSquare

square

multiply

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

printSquare

square

multiply

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

printSquare

square

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

printSquare

console.log

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

main

Call Stack

function multiply (a, b) {
  return a * b
}

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

function printSquare (a) {
  var s = square(a)
  console.log(s)
}

printSquare(2)

Call Stack

function c () {
  console.log(window.test.i)
}

function b () {
  c()
}

function a () {
  b()
}

a()

main

Call Stack

function c () {
  console.log(window.test.i)
}

function b () {
  c()
}

function a () {
  b()
}

a()

main

a

b

c

Call Stack

function c () {
  console.log(window.test.i)
}

function b () {
  c()
}

function a () {
  b()
}

a()

main

a

b

c

Call Stack

function a () {
  a()
}

a()

main

Call Stack

function a () {
  a()
}

a()

main

a

Call Stack

function a () {
  a()
}

a()

main

a

a

a

a

a

a

a

a

a

Web APIs

setTimeout

Event Loop and render

Obrigado!

@carlosxjm

@frontendce

Event Loop

By Carlos José

Event Loop

  • 213