JavaScript Event Loop

1.
Globalcode – Open4education JavaScriptEvent Loop

2.
Who? Derek Stavis github.com/derekstavis Software Engineer Ruby,Go, JavaScript, Python, C Node, React & Webpack Advocate

3.
JavaScript Recap

4.
single threaded non-blocking asynchronous concurrent runtime

5.
call stack event loop callbackqueue vendor APIs

6.
Globalcode – Open4education Heap MemoryAvailable Task Queue listOnTimeout listOnTimeout listOnTimeout listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Vendor APIs (Node, Web, GJS) Runtime and Platform Abstraction Event Loop Task Scheduler

7.
Globalcode – Open4education Heap MemoryAvailable Task Queue listOnTimeout listOnTimeout listOnTimeout listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Vendor APIs (Node, Web, GJS) Runtime and Platform Abstraction Event Loop Task Scheduler VENDOR DEPENDENT VENDOR DEPENDENT ECM A262 VENDOR DEPENDENT ECM A262 OVERLAP VENDOR DEPENDENT ECM A262 OVERLAP

8.
Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs Vendor Dependent Vendor APIs

9.
JavaScript has many implementations

10.
Spidermonkey JavaScriptCore ChakraCore XS  V8

11.
Web Node GJS KinomaJS Johnny Five

12.
Web var tID =setTimeout(callback, [delay[, ...args]]) var tID = setTimeout(callback, [delay]) var tID = setTimeout(code[, delay]) var iID = setInterval(func, delay[, ...args]) var iID = setInterval(code, delay) clearTimeout(tID) clearTimeout(iID) https://www.w3.org/standards/webdesign/script

13.
Node var timeout =setTimeout(callback, [delay, [...args]]) var interval = setInterval(callback, [delay, [...args]]) var immediate = setImmediate(callback[, ...args]) clearTimeout(timeout) clearInterval(interval) clearImmediate(immediate) https://nodejs.org/dist/latest-v10.x/docs/api/

14.
Node console.log('start'); process.nextTick(() => { console.log('nextTickcallback'); }); console.log('scheduled'); https://nodejs.org/dist/latest-v10.x/docs/api/

15.
GJS const { mainloop} = imports mainloop.timeout_add(1, () => log(“Hello World”)) mainloop.timeout_add(1, mainloop.quit)   mainloop.run() GJSDocs based on GObject Instrospection

16.
Johnny Five // Blinkan LED var five = require("johnny-five") var board = new five.Board() board.on("ready", function() { var led = new five.Led(13) led.blink() }); http://johnny-five.io/api/led/#usage http://johnny-five.io/api/

17.
Johnny Five // Blinkan LED var five = require("johnny-five") var board = new five.Board() board.on("ready", function() { var led = new five.Led(13) led.blink() }); http://johnny-five.io/api/led/#usage http://johnny-five.io/api/

18.
Experiment with engines https://npmjs.com/package/jsvu

19.
Quick Demo

20.
Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs ECMA 8.4 Jobs and Job Queues & ECMA 8.6 RunJobs() Call Stack

21.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints()

22.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints() main

23.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints() prints main

24.

25.

26.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints() square prints main

27.

28.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints() multiply square prints main

29.

30.

31.

32.

33.

34.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints() console.log prints main

35.

36.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints() main

37.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number))    prints()

38.
Pretty easy tograsp

39.
That’s where that  “stacktraces” thing comes from

40.
Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs And some of Event Loop Task Queue

41.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

42.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) main const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

43.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) setTimeout main

44.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000 setTimeout main

45.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) main const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000

46.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000

47.
And now?

48.
When does thetimer really fires?

49.
Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs Vendor Dependent & Partially described in ECMA Event Loops

50.
There’s an infiniteloop while (queue.waitForMessage()) { queue.processNextMessage(); }

51.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000

52.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) tryOnTimeout listOnTimeout

53.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout

54.

55.

56.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

57.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) square prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

58.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) square prints tryOnTimeout listOnTimeout

59.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) multiply square prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

60.

61.

62.

63.

64.

65.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) console.log prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

66.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

67.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

68.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

69.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)

70.
So that’s itfor event loops, right?

71.
The loop dequeuesan event, dispatches the callback…

72.
And setTimeout and setIntervaladds callbacks to queue…

73.
And every tickthe loop consumes an item from the queue…

74.
Then

75.
You notice this:

76.
Promise case console.log('script start');   newPromise(resolve => { resolve(); console.log('executor'); }) .then(() => console.log('then');   console.log('script end');

77.
script start script end then  executor B AC D script start then  executor  script end script start script end executor then script start then  executor  script end

78.
script start then  executor  script end scriptstart script end then  executor B A C script start script end executor then D script start then  executor  script end

79.
Promise case console.log('script start');   newPromise(resolve => { resolve(); console.log('executor'); }) .then(() => console.log('then');   console.log('script end');

80.
Surprise! Promise resolution enqueues atask!

81.
And then someday

82.
Browser console console.log('script start'); setTimeout(()=> console.log('setTimeout'), 0); requestAnimationFrame(() => console.log('requestAnimationFrame')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end');

83.
script start script end setTimeout promise1 promise2 scriptstart script end promise1 promise2 setTimeout B A C script start setTimeout promise1 promise2 script end D script start promise1 promise2 setTimeout  script end

84.
script start script end  setTimeout promise1 promise2 scriptstart script end promise1 promise2 setTimeout B A C script start setTimeout promise1 promise2 script end D script start setTimeout promise1 promise2  script end

85.
Browser console console.log('script start'); setTimeout(()=> console.log('setTimeout'), 0); requestAnimationFrame(() => console.log('requestAnimationFrame')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end');

87.
*Looks for specs*

88.
*Tries to graspwhy*

90.
HTML Event Loop html.spec.whatwg.org/multipage/ webappapis.html#event-loops

91.
HTML specification defines additional taskqueues

92.
As part ofthe W3C HTML standard

93.
Promise & MutationObserver callbacks https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

94.
Globalcode – Open4education Heap MemoryAvailable Macrotask Queue listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Web API Runtime and Platform Abstraction Event Loop Task Scheduler Microtask Queue promiseReactionJob promiseReactionJob

95.
After the endof each macrotask, drain the microtask queue https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

96.
But there areother relevant queues that looks like microtask’s https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

97.
Every event loopis made of phases https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

99.
Macrotask

100.
MicrotaskMacrotask

101.
Microtask Render UpdateMacrotask

102.
Window Resize Microtask RenderUpdateMacrotask

103.
Window Resize Microtask RenderUpdate Scroll Steps Pending targets Macrotask

104.
Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Macrotask

105.
Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Animations Pending targets Macrotask

106.
Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Fullscreen Pending events Animations Pending targets Macrotask

107.
Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Animation Frame Fullscreen Pending events Animations Pending targets Macrotask

108.
Window Resize Media Queries MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Fullscreen Pending events Animations Pending targets Macrotask

109.
Window Resize Media Queries MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Fullscreen Pending events Animations Pending targets Macrotask

110.
Window Resize Media Queries MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask

111.
Window Resize Media Queries Intersections MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask

112.
Paint Window Resize Media Queries Intersections MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask

113.
Paint Window Resize Media Queries Intersections MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask Loop

114.
Every tick runs allthis phases

115.
So let’s debugour code

116.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame main Macrotask

117.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame main Macrotask

118.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame console.log main Macrotask

119.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame setTimeout main Macrotask

120.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame setTimeout main timeout1 Macrotask

121.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame requestAnimationFrame main timeout1 Macrotask

122.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame requestAnimationFrame main timeout1 reqAnimFrm1 Macrotask

123.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Promise.resolve main timeout1 reqAnimFrm1 Macrotask

124.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Promise.then main timeout1 reqAnimFrm1 promise1 Macrotask

125.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Promise.then main timeout1 reqAnimFrm1 promise1 promise2 Macrotask

126.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame console.log main timeout1 reqAnimFrm1 promise1 promise2 Macrotask

127.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame main timeout1 reqAnimFrm1 promise1 promise2 Macrotask

128.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise1 promise2 Macrotask

129.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise1 promise2 Microtask

130.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask <anonymous>

131.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask console.log <anonymous>

132.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask <anonymous>

133.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask

134.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Microtask <anonymous>

135.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Microtask console.log <anonymous>

136.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Microtask <anonymous>

137.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update

138.

139.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Window Resize

140.

141.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Scroll Steps

142.

143.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Media Queries

144.

145.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Animations

146.

147.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Fullscreen

148.

149.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Animation Frame

150.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update <anonymous>

151.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame <anonymous>

152.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update console.log <anonymous>

153.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame console.log <anonymous>

154.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update <anonymous>

155.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame <anonymous>

156.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update

157.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame

158.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update

159.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Intersections

160.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Paint

161.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Paint

162.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask timeout1

163.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask <anonymous>

164.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame console.log <anonymous> Macrotask

165.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask <anonymous>

166.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask

167.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Microtask

168.
Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Render Update

169.
Node.js console console.log('script start’); setTimeout(()=> console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’);

170.
script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end promise1 promise2 nextTick setTimeout setImmediate B A C script start script end promise1 promise2 setTimeout setImmediate nextTick D script start script end promise1 promise2 setImmediate setTimeout nextTick

171.
script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end promise1 promise2 nextTick setTimeout setImmediate B A C script start script end promise1 promise2 setTimeout setImmediate nextTick D script start script end promise1 promise2 setImmediate setTimeout nextTick

172.

174.
Looks like Node.jshas some strangeness happening

175.
It happens that

176.
NAMES

177.
Node.js Event Loop https://nodejs.org/en/docs/guides/ event-loop-timers-and-nexttick/

178.
Globalcode – Open4education Heap MemoryAvailableDelayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Node.js API Runtime and Platform Abstraction Event Loop Task Scheduler Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks Task Queues

179.
The queues are consumedin order, top-down

180.
nextTick → microTask nextTick→ microTask nextTick → microTask nextTick → microTask nextTick → microTask nextTick → microTask Globalcode – Open4education Pending Callbacks Idle, Prepare Timers Poll Check Close Callbacks Checks timers that expired and call their callbacks Exhaust the pending queue: Delivers system error callbacks such as ECONNREFUSED Node.js internal Exhausts poll queue: Delivers callbacks for file reads, socket listening, incoming connections Exhausts "immediate" queue: Delivers callbacks for setImmediate calls Exhausts this callbacks queue: Delivers callbacks for socket close & destroy, errors setInterval, setTimeout server.listen  socket.on('data')  fs.readFile setImmediate socket.close() socket.destroy() Checkpoint Repeat socket.on('error')

182.
nextTick → microTask nextTick→ microTask nextTick → microTask nextTick → microTask nextTick → microTask nextTick → microTask Globalcode – Open4education Pending Callbacks Idle, Prepare Timers Poll Check Close Callbacks Checks timers that expired and call their callbacks Exhaust the pending queue: Delivers system error callbacks such as ECONNREFUSED Node.js internal Exhausts poll queue: Delivers callbacks for file reads, socket listening, incoming connections Exhausts "immediate" queue: Delivers callbacks for setImmediate calls Exhausts this callbacks queue: Delivers callbacks for socket close & destroy, errors setInterval, setTimeout server.listen  socket.on('data')  fs.readFile setImmediate socket.close() socket.destroy() Checkpoint Repeat socket.on('error')

183.

184.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask main

185.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log main

186.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setTimeout main

187.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setTimeout main

188.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask process.nextTick main

189.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask process.nextTick main

190.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setImmediate main

191.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setImmediate main

192.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.resolve main

193.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.then main

194.

195.

196.

197.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log main

198.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask main

199.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask

200.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>

201.
Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log <anonymous>

202.

203.

204.

205.

206.

207.

208.

209.

210.

211.

212.

213.

214.

215.

216.

217.

218.

219.

220.

221.

222.

223.
Node.js console setTimeout(() =>{  console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’);  }, 0);

224.
script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end nextTick promise1 promise2 setImmediate setTimeout B A

225.
script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end nextTick promise1 promise2 setImmediate setTimeout B A

227.
When a taskwill be executed depends on the phase it’s enqueued

228.
setInterval on timer phase fulfilsat next tick

229.
setImmediate on timer phase fulfilsat same tick

230.
Previous phases can scheduletasks for next phases

231.
Tasks scheduled ona queue that has already processed will be processed on next tick

232.
That’s why script evaluationbehaves differently

233.
The loop isn’tin any phase before the script is fully evaluated

234.
Recap

235.
That diagram isan oversimplification

236.
Globalcode – Open4education Heap MemoryAvailable Task Queue listOnTimeout listOnTimeout listOnTimeout listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Vendor APIs (Node, Web, GJS) Runtime and Platform Abstraction Event Loop Task Scheduler

237.
Stuff ends upbeing like this on the Web

238.
Globalcode – Open4education Heap MemoryAvailable Macrotask Queue listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Web API Runtime and Platform Abstraction Event Loop Task Scheduler Microtask Queue promiseReactionJob promiseReactionJob

239.
And like thisin Node.js

240.
Globalcode – Open4education Heap MemoryAvailableDelayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Node.js API Runtime and Platform Abstraction Event Loop Task Scheduler Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks Task Queues

241.
So check runtime’s documentation

242.
JavaScript is popularon Node.js and Web

243.
But you canuse it everywhere

244.
You can buildyour own event loop tied to your needs

245.
Make available your ownset of Vendor APIs

246.
That’s all folks

247.
Thanks Have a greatevent!

248.
Refs https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf http://voidcanvas.com/nodejs-event-loop/ https://www.w3.org/TR/2018/WD-dom41-20180201/ https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model http://johnny-five.io/api/

JavaScript Event Loop

More Related Content

What's hot

Similar to JavaScript Event Loop

More from Derek Willian Stavis

Recently uploaded

JavaScript Event Loop