Javascript assíncrono
@cezinha_anjos 1
Um bate-papo sobre event loop, event queue,
callbacks e promises
@cezinha_anjos
• Programo há 25 anos, sendo
que já passei por diversas
linguagens e paradigmas de
programação.
• Estou atu...
3
console.clear();
console.log("a");
!
setTimeout(function(){

console.log("b");	

}, 2000);

console.log("c");
!
setTimeo...
4
console.clear();
console.log("a");
!
setTimeout(function(){

console.log("b");	

}, 2000);

console.log("c");
!
setTimeo...
5
console.clear();
console.log("a");
!
setTimeout(function(){

console.log("b");	

}, 2000);

console.log("c");
!
setTimeo...
Por que a execução não
para e aguarda o
setTimeout?
6
Por que o setTimeout de
1 seg. retornou antes do
de 2seg.?
7
resposta: event loop
8
9
event queue
event loop
∞
single thread
JS VM / libuvS.O. workers outros
10
console.clear();
console.log("a");
!
setTimeout(function(){

console.log("b");	

}, 2000);

console.log("c");
!
setTime...
11
setTimeout - 2000
setTimeout - 1000
event queue
event loop
∞
single thread
JS VM / libuvS.O. workers outros
outro exemplo
12
Bloqueante
var start = new Date();
!
for(var i = 0; i < 100000000; i++) { };
for(var i = 0; i < 100000000; i++) { };
!
con...
Não bloqueante
var start = new Date();
!
setTimeout(function() {
for(var i = 0; i < 100000000; i++) { };
}, 0);
!
setTimeo...
De 545 ms para 11 ms?
Será que rodou tudo?
15
var start = new Date(), count = 0;
setTimeout(function() {
for(var i = 0; i < 100000000; i++) { }; count++;
}, 0);
!
setTi...
!
Não programe async
confiando que a resposta virá
em uma determinada
sequência ou imediatamente.
!
#FicaDica
17
callbacks
18
Um callback é a maneira mais básica de
ser notificado sobre um retorno
assíncrono.
19
São simplesmente funções passadas
como parâmetro para chamadas
assíncronas.
20
21
!
setTimeout(myCallback, 2000);

function myCallback() {
console.log(
“Passou-se pelo menos 2 segundos”
);
}
Uma implementação mais popular
22
23
$(“button#add”).on(“click”, function(){

console.log(“Botão add foi clicado");	

});
$(“button#add”).on(“click”, myCall...
Dois callbacks para o mesmo evento
24
25
$(“button#add”).on(“click”, myCallback1);
$(“button#add”).on(“click”, myCallback2);

function myCallback1() {
console.l...
Somente elementos que implementem o
padrão Observer permitem mais de um
callback.
!
O event loop só responde a um
callback...
27
Callback1 Callback2
notificador
click
JQuery.on() e AddEventListener() são
implementações de Observers
28
$.Deferred();
29
30
var deferred = $.Deferred();
!
deferred.done(function(){

console.log(“Deferido");	

});
!
deferred.fail(function(){

c...
deferred.promise()
31
Promise é um subset de deferred. A
diferença entre eles é que promise não
possui os métodos resolve() e reject()
32
Onde promise é
usado?
33
34
var response = $.ajax({
url: “/person.json”,
data: {id: 1},
dataType: “json”
});
!
response.always(function(){

console...
Por que não deferred?
35
36
var response = $.ajax({
url: “/person.json”,
data: {id: 1},
dataType: “json”
});
!
response.reject();
!
response.always...
Legal… mas posso usar
nas minhas
implementações?
37
38
function sayMyName(name) {
var deferred = $.Deferred();
!
if (name === “Heisenberg”) {
deferred.resolve();
} else {
def...
Muito obrigado!
@cezinha_anjos
cezinha.info
asseinfo.com.br
39
Upcoming SlideShare
Loading in …5
×

Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises

749 views
534 views

Published on

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
749
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises

  1. 1. Javascript assíncrono @cezinha_anjos 1 Um bate-papo sobre event loop, event queue, callbacks e promises
  2. 2. @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
  3. 3. 3 console.clear(); console.log("a"); ! setTimeout(function(){
 console.log("b"); }, 2000);
 console.log("c"); ! setTimeout(function(){
 console.log("d"); }, 1000);

  4. 4. 4 console.clear(); console.log("a"); ! setTimeout(function(){
 console.log("b"); }, 2000);
 console.log("c"); ! setTimeout(function(){
 console.log("d"); }, 1000);
 a b c d Saída esperada após 1 seg. após 2 seg. imediato imediato
  5. 5. 5 console.clear(); console.log("a"); ! setTimeout(function(){
 console.log("b"); }, 2000);
 console.log("c"); ! setTimeout(function(){
 console.log("d"); }, 1000);
 a c d b Saída de fato após 1 seg. após 2 seg. imediato imediato
  6. 6. Por que a execução não para e aguarda o setTimeout? 6
  7. 7. Por que o setTimeout de 1 seg. retornou antes do de 2seg.? 7
  8. 8. resposta: event loop 8
  9. 9. 9 event queue event loop ∞ single thread JS VM / libuvS.O. workers outros
  10. 10. 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
  11. 11. 11 setTimeout - 2000 setTimeout - 1000 event queue event loop ∞ single thread JS VM / libuvS.O. workers outros
  12. 12. outro exemplo 12
  13. 13. Bloqueante var 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
  14. 14. Não bloqueante var 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
  15. 15. De 545 ms para 11 ms? Será que rodou tudo? 15
  16. 16. 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
  17. 17. ! Não programe async confiando que a resposta virá em uma determinada sequência ou imediatamente. ! #FicaDica 17
  18. 18. callbacks 18
  19. 19. Um callback é a maneira mais básica de ser notificado sobre um retorno assíncrono. 19
  20. 20. São simplesmente funções passadas como parâmetro para chamadas assíncronas. 20
  21. 21. 21 ! setTimeout(myCallback, 2000);
 function myCallback() { console.log( “Passou-se pelo menos 2 segundos” ); }
  22. 22. Uma implementação mais popular 22
  23. 23. 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
  24. 24. Dois callbacks para o mesmo evento 24
  25. 25. 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”); }
  26. 26. Somente elementos que implementem o padrão Observer permitem mais de um callback. ! O event loop só responde a um callback. 26
  27. 27. 27 Callback1 Callback2 notificador click
  28. 28. JQuery.on() e AddEventListener() são implementações de Observers 28
  29. 29. $.Deferred(); 29
  30. 30. 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
  31. 31. deferred.promise() 31
  32. 32. Promise é um subset de deferred. A diferença entre eles é que promise não possui os métodos resolve() e reject() 32
  33. 33. Onde promise é usado? 33
  34. 34. 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"); });
  35. 35. Por que não deferred? 35
  36. 36. 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!
  37. 37. Legal… mas posso usar nas minhas implementações? 37
  38. 38. 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!”); }) ;
  39. 39. Muito obrigado! @cezinha_anjos cezinha.info asseinfo.com.br 39

×