Your SlideShare is downloading. ×
0
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Javascript assíncrono - Um bate-papo sobre event loop, event queue, callbacks e promises
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

382

Published on

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

No Downloads
Views
Total Views
382
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

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

×