Loop into the Javascript Event Loop - JavaScript Israel Meetup

This short talk will explain how javascript handles being both single-threaded and non-blocking. We'll demystify the "Event Loop" and how concurrency works in javascript. If a coworker ever helped you solve a bug by wrapping a function with a `setTimeout(myFunc, 0)` and you felt cheated, this talk is definitely for you.

Presented at http://www.meetup.com/JavaScript-Israel/events/229643120/

Transcript

1. Loop into the Javascript Event Loop
2. Yonatan Mevorach blog.cowchimp.com github.com/cowchimp @cowchimp
3. Javascript is single-threaded No race conditions, No locks. This is the life!
4. Javascript is blocking for (var i = 0; i < 10000000; i++) { }; var now = new Date().getTime(); while (new Date().getTime() < now + 10000) { }
5. js is blocking, everything else isn’t Ajax! Animations! Timeouts! User interactions!
6. Technically…
7. Callbacks
8. Javascript Runtime Source: MDN Concurrency model and Event Loop
9. Javascript Runtime Ajax
10. Javascript Runtime Ajax result
11. Javascript Runtime Ajax callback
12. Javascript Runtime
13. The Event Loop while (queue.waitForMessage()) { queue.processNextMessage(); }
14. Can js operations be non-blocking? [ , , ] , , , , , , , , , , , [ , , ] , , , , , , , , , , ,
15. function chunk(array, process, context) { var items = array.concat(); //clone the array setTimeout(function () { var item = items.shift(); process.call(context, item); if (items.length > 0) { setTimeout(arguments.callee, 100); } }, 100); } Source: Nicholas C. Zakas' "Timed array processing in JavaScript" `setTimeout` to the resuce
16. setTimeout(myFunc, 0); “Asyncify”™ sync operations
17. setTimeout(myFunc, 0); “Asyncify”™ sync operations setImmediate(myFunc); DEMO
18. setTimeout(myFunc, 0); “Asyncify”™ sync operations requestAnimationFrame(myFunc); requestIdleCallback(myFunc); process.nextTick(myFunc); window.addEventListener("message", myFunc); setImmediate(myFunc); Promise.resolve().then(myFunc); https://github.com/YuzuJS/setImmediate
19. setTimeout(function () { console.log('hello'); }, 0); ['world'].forEach(function (str) { console.log(str); }); console.log('!'); Quiz time
20. console.log('script start'); setTimeout(function () { console.log('setTimeout'); }, 0); Promise.resolve().then(function () { console.log('promise1'); }).then(function () { console.log('promise2'); }); console.log('script end'); Quiz time # 2 Source: Jake Archibald‘s "Tasks, microtasks, queues and schedules"
21. Web Workers var myWorker = new Worker('worker.js');
22. What about node.js?
23. • What the heck is the event loop anyway? • Writing a Non-blocking JavaScript Quicksort • The case for setImmediate() • Dissecting the HTML 5 Event Loop - Loops, Task Queues and Tasks • The Basics of Web Workers Further reading
24. blog.cowchimp.com @cowchimp yonatan@sears.co.il Questions? Yonatan Mevorach