javascript assíncrono - um bate-papo sobre event loop, event queue, callbacks e promises
DESCRIPTION
TRANSCRIPT
![Page 1: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/1.jpg)
Javascript assíncrono
@cezinha_anjos 1
Um bate-papo sobre event loop, event queue, callbacks e promises
![Page 2: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/2.jpg)
@cezinha_anjos• Programo há 25 anos, sendo
que já passei por diversas linguagens e paradigmas de programação.
• Estou atualmente focado em tecnologias web, principalmente em Ruby on Rails e Javascript.
• Amante de OO, Clean Code, Design Patterns, BDD e Lean.
• Sou diretor da ASSEINFO.
2
![Page 3: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/3.jpg)
3
console.clear(); console.log("a"); !
setTimeout(function(){ console.log("b"); }, 2000);
console.log("c"); !
setTimeout(function(){ console.log("d"); }, 1000);
![Page 4: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/4.jpg)
4
console.clear(); console.log("a"); !
setTimeout(function(){ console.log("b"); }, 2000);
console.log("c"); !
setTimeout(function(){ console.log("d"); }, 1000);
abcd
Saída esperada
após 1 seg.
após 2 seg.
imediato
imediato
![Page 5: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/5.jpg)
5
console.clear(); console.log("a"); !
setTimeout(function(){ console.log("b"); }, 2000);
console.log("c"); !
setTimeout(function(){ console.log("d"); }, 1000);
acdb
Saída de fato
após 1 seg.
após 2 seg.
imediato
imediato
![Page 6: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/6.jpg)
Por que a execução não para e aguarda o
setTimeout?
6
![Page 7: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/7.jpg)
Por que o setTimeout de 1 seg. retornou antes do
de 2seg.?
7
![Page 8: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/8.jpg)
resposta: event loop
8
![Page 9: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/9.jpg)
9
event queue
event loop
∞
single thread
JS VM / libuvS.O. workers outros
![Page 10: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/10.jpg)
10
console.clear(); console.log("a"); !
setTimeout(function(){ console.log("b"); }, 2000);
console.log("c"); !
setTimeout(function(){ console.log("d"); }, 1000);
executa
executa
agenda
agenda
![Page 11: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/11.jpg)
11
setTimeout - 2000
setTimeout - 1000
event queue
event loop
∞
single thread
JS VM / libuvS.O. workers outros
![Page 12: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/12.jpg)
outro exemplo
12
![Page 13: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/13.jpg)
Bloqueantevar start = new Date(); !
for(var i = 0; i < 100000000; i++) { }; for(var i = 0; i < 100000000; i++) { }; !
console.log(new Date() - start, “ms"); # 545 ms
13
![Page 14: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/14.jpg)
Não bloqueantevar start = new Date(); !setTimeout(function() { for(var i = 0; i < 100000000; i++) { }; }, 0); !setTimeout(function() { for(var i = 0; i < 100000000; i++) { }; }, 0); !console.log(new Date() - start, “ms"); # 11 ms
14
![Page 15: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/15.jpg)
De 545 ms para 11 ms? Será que rodou tudo?
15
![Page 16: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/16.jpg)
var start = new Date(), count = 0; setTimeout(function() { for(var i = 0; i < 100000000; i++) { }; count++; }, 0); !setTimeout(function() { for(var i = 0; i < 100000000; i++) { }; count++ }, 0); !console.log(new Date() - start, “ms”); console.log(count, “ocorrências”); # 11 ms # 0 ocorrências ———————————————— console.log(count, “ocorrências”); # 2 ocorrências
16
![Page 17: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/17.jpg)
!
Não programe async confiando que a resposta virá
em uma determinada sequência ou imediatamente.
!
#FicaDica
17
![Page 18: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/18.jpg)
callbacks
18
![Page 19: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/19.jpg)
Um callback é a maneira mais básica de ser notificado sobre um retorno assíncrono.
19
![Page 20: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/20.jpg)
São simplesmente funções passadas como parâmetro para chamadas assíncronas.
20
![Page 21: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/21.jpg)
21
!
setTimeout(myCallback, 2000);
function myCallback() { console.log( “Passou-se pelo menos 2 segundos” ); }
![Page 22: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/22.jpg)
Uma implementação mais popular
22
![Page 23: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/23.jpg)
23
$(“button#add”).on(“click”, function(){ console.log(“Botão add foi clicado"); });
$(“button#add”).on(“click”, myCallback);
function myCallback() { console.log(“Botão add foi clicado”); }
OU
![Page 24: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/24.jpg)
Dois callbacks para o mesmo evento
24
![Page 25: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/25.jpg)
25
$(“button#add”).on(“click”, myCallback1); $(“button#add”).on(“click”, myCallback2);
function myCallback1() { console.log(“Callback 1 foi disparado”); } !
function myCallback2() { console.log(“Callback 2 foi disparado”); }
![Page 26: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/26.jpg)
Somente elementos que implementem o padrão Observer permitem mais de um callback.
!
O event loop só responde a um callback.
26
![Page 27: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/27.jpg)
27
Callback1 Callback2
notificador
click
![Page 28: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/28.jpg)
JQuery.on() e AddEventListener() são implementações de Observers
28
![Page 29: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/29.jpg)
$.Deferred();
29
![Page 30: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/30.jpg)
30
var deferred = $.Deferred(); !
deferred.done(function(){ console.log(“Deferido"); }); !
deferred.fail(function(){ console.log(“Indeferido"); }); !
deferred.always(function(){ console.log(“Sempre"); });
deferred.resolve(); Deferido Sempre !
!
deferred.reject(); Indeferido Sempre
Saída do console
![Page 31: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/31.jpg)
deferred.promise()
31
![Page 32: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/32.jpg)
Promise é um subset de deferred. A diferença entre eles é que promise não possui os métodos resolve() e reject()
32
![Page 33: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/33.jpg)
Onde promise é usado?
33
![Page 34: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/34.jpg)
34
var response = $.ajax({ url: “/person.json”, data: {id: 1}, dataType: “json” }); !response.always(function(){ console.clear(); }); !response.done(function(person){ console.log(person); }); !response.fail(function(){ console.log(“Person not found"); });
![Page 35: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/35.jpg)
Por que não deferred?
35
![Page 36: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/36.jpg)
36
var response = $.ajax({ url: “/person.json”, data: {id: 1}, dataType: “json” }); !response.reject(); !response.always(function(){ console.clear(); }); !response.done(function(person){ console.log(person); }); !response.fail(function(){ console.log(“Person not found"); });
por isso!
![Page 37: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/37.jpg)
Legal… mas posso usar nas minhas
implementações?
37
![Page 38: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/38.jpg)
38
function sayMyName(name) { var deferred = $.Deferred(); ! if (name === “Heisenberg”) { deferred.resolve(); } else { deferred.reject(); } ! return deferred.promise(); } !sayMyName(“Jesse Pinkman”) .always(function(){ console.clear(); }) .done(function(){ console.log(“You know my name!”); }) .fail(function(){ console.log(“It’s better call Saul!”); }) ;
![Page 39: Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises](https://reader034.vdocuments.mx/reader034/viewer/2022042606/5478ea975806b585048b461e/html5/thumbnails/39.jpg)
Muito obrigado!
@cezinha_anjos
cezinha.info
asseinfo.com.br
39