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