How callbacks in JavaScript really work

Understanding how JavaScript actually handles asynchronous callbacks.

Transcript

1. @jsstrn Jesstern Rays
2. callbacks
3. analogy
4. butler
5. make me a sandwich
6. two ways to do this
7. first way
8. first way wait for butler to make sandwich
9. first way blocking wait for butler to make sandwich
10. first way blocking synchronous wait for butler to make sandwich
11. second way
12. second way butler makes sandwich; we do something else
13. second way butler makes sandwich; we do something else butler calls us back when its done
14. second way non-blocking butler makes sandwich; we do something else butler calls us back when its done
15. second way non-blocking asynchronous butler makes sandwich; we do something else butler calls us back when its done
16. but JavaScript is single threaded
17. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
18. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
19. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn() console.log()
20. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
21. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
22. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
23. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) setTimeout(fn,0)
24. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
25. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
26. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
27. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn() console.log()
28. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
29. app.js call stack fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
30. how async callbacks really work
31. What the heck is the event loop anyway? by Philip Roberts
32. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
33. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
34. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn() console.log()
35. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
36. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
37. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
38. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) setTimeout(fn,0)
39. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
40. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) setTimeout(fn,0)
41. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
42. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
43. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
44. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
45. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
46. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn() console.log()
47. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0) fn()
48. app.js call stack web apis callback queue event loop fn() function fn () { console.log(‘You called?’) } setTimeout(fn, 0)
49. thank you
50. @jsstrn Jesstern Rays
51. references What the heck is the event loop anyway? by Philip Roberts Philip Robert’s "loupe"
52. image credits Waiter by Scott Lewis from the Noun Project Sandwich by Tom Glass, Jr. from the Noun Project