EventLoop

Needless to say, we all know js is a single thread language, which also shows that JS can not be multithreaded, but the asynchronous function of JS can simulate multithreading, and the effect is also great drops. Of course, if you want to fully understand asynchrony, you should first understand the core of JS operation — Event Loop. The following two parts to understand Event Loop:

1. Event Loop in browser

1. To better understand the JS task queue and event loop in the browser, take a look at the following figure:

• EventLoop is implemented by the JS host environment (browser);
• The event cycle can be simply described as the following four steps:

When an asynchronous task is executed in the Stack, it is dumped to the WebAPIs, and the synchronous task is executed until the Stack is empty. 2. In the meantime, WebAPIs complete the event and queue the callback function for execution (micro task to micro task queue, macro task to macro task queue). When the stack is empty, the Event Loop clears the microtask queue. 4. After the microtask queue is empty, enter the macro task queue and put the first task in the queue into the Stack for execution. Return to Step 1.Copy the code

2. Learn about tasks in the browser:

• Microtasks: then, messageChannel, mutationObersve
• Macro tasks: setTimeout, setInterval, setTmmediate(Compatible with IE only)

3. Let’s implement a small example:

console.log(1);
console.log(2);
setTimeout(function () {
  console.log('setTimeout1');
  Promise.resolve().then(function () {
    console.log('promise');
  });
});
setTimeout(function () {
  console.log('setTimeout2');
});

Copy the code

Print result:

1

2

setTimeout1

promise

setTimeout2

2: Event Loop in Node environment

1. To better understand the JS task queue and event loop in the Node environment, take a look at the following figure:

• The graph is a bit messy, but all we need to worry about is the Timers and poll polling phases, the Check phase, the Clons shutdown phase, and the microtask queue.

• Node environment is inserted joint task execution, (if discovered macro tasks when the task, will not perform like a browser, but for the micro task into micro task queue, waiting for the whole macro task queue or to perform on-line after the beginning of the next stage to perform the task of micro task queue).

2. Learn about task sources in Node:

• Microtasks: THEN, nextTick, messageChannel, mutationObersve
• Macro tasks: setTimeout, setInterval, setImmediate, IO file operations

3. Example 1: timeout or immediate execution does not necessarily depend on node execution time.

setTimeout(function () {
    console.log('setTimeout1');
})
setImmediate(function () {
    console.log('setImmediate2');
});
Copy the code

There are two types of print results:

• 1） setTimeout1 setImmediate2
• 2） setImmediate2 setTimeout1

4. SetImmediate Is used to mediate the I/O file operation. SetImmediate mediate is used to mediate the I/O file operation. SetImmediate is used to mediate the I/O file operation.

let fs = require('fs');
fs.readFile('1.log'.function () {
  console.log('fs');
  setTimeout(function () {
    console.log('timeout');
  });
  setImmediate(function () {
    console.log('mmiediate');
  });
});

Copy the code

Print order result

• Fs, miediate, timeout

5. Example 3: In microtasks nextTIck is executed before THEN.

Promise.resolve().then(function () {
  console.log('then2'):
});
process.nextTick(function () {
  console.log('nextTick1');
});


Copy the code

Print order result

• nextTick1 then2

6. Example 4: Microtasks take precedence over I \ O file operations.

let fs = require('fs');
fs.readFile('./1/log'.function(){
    console.log('fs')
})
process.nextTick(function(){
    console.log('text2');
})

Copy the code

Print execution results

• text2 fs

Well, that’s all for today. If there are any mistakes, please leave a message below. As a code farmer, the biggest wish and the greatest ideal is, da Bao see each other every day, bug dead and living no longer meet each other, forget in the river’s lake, the enmity disappears!!