Javascript is a single-threaded, non-blocking scripting language. Single-threaded means that at any time javascript executes code, there is only one main thread to handle all tasks.

So how does a javascript engine achieve this?

Because of the event loop. First above:

Picture interpretation:

  • Synchronous and asynchronous tasks go to different execution sites, synchronous to the main thread, asynchronous to the main threadEvent TableAnd register the function
  • When the assigned task is completed (emphasis).Event TableI’m going to move this function inEvent QueueIn the
  • Tasks in the main thread are empty and goEvent QueueRead the corresponding function, into the main thread execution
  • This process is repeated over and over again, as is often saidEvent Loop.

A simple example

Let’s use a simple example to illustrate:

console.log('1');
setTimeout((a)= > {
	console.log('2');
}, 0)
console.log('3');
Copy the code

The above code will print the following:

1 2 3Copy the code

Because setTimeout is an asynchronous task, it is executed at the end.

So, let’s do a more complicated example:

Complex example

 console.log('1');
 setTimeout((a)= > {
 	console.log('2')},1000);
 new Promise((resolve, reject) = > {
 	setTimeout((a)= > {
 		console.log('3');
 	}, 0);
 	console.log('4');
 	resolve();
 	console.log('5');
 }).then((a)= > {
 	console.log('6');
 });
 console.log('7');
Copy the code

The output from the above code is:

1
4
5
7
6
3
2
Copy the code

Is there some confusion when you look at this code? Before we get to the bottom of the mystery, let’s take a look at microtasks and macrotasks.

Microtasks and macro tasks

Microtasks and macro tasks are asynchronous tasks. They are both queued. The main difference is the order in which they are executed — microtasks are executed before macro tasks.

Macro tasks include: setTimeout, setInterval, setImmediate, I/O, and UI Rendering

Microtasks include: Process. nextTick, Promise. then, and MutationObserver

HMM ~ back to the code above, as follows:

 console.log('1');
 setTimeout((a)= > {
 	console.log('2')},1000);
 new Promise((resolve, reject) = > {
 	setTimeout((a)= > {
 		console.log('3');
 	}, 0);
 	console.log('4');
 	resolve();
 	console.log('5');
 }).then((a)= > {
 	console.log('6');
 });
 console.log('7');
Copy the code

When a new Promise is executed, a new Promise object is created and executed immediately. So 1,4,5 is printed, and then is registered as a callback function in the Event Table and placed in the microtask queue, while the two setTimeout functions (output 3) and setTimeout(output 2,1 s) are registered as callbacks and placed in the macro task queue.

After understanding some of the above principles, let’s practice hands again…

console.log(1)
process.nextTick((a)= > {
  console.log(8)
  setTimeout((a)= > {
    console.log(9)
  })
})
setTimeout((a)= > {
  console.log(2)
  new Promise((a)= > {
    console.log(11)})})let promise = new Promise((resolve,reject) = > {
  setTimeout((a)= > {
    console.log(10)
  })
  resolve()
  console.log(4)
})
fn()
console.log(3)
promise.then((a)= > {
  console.log(12)})function fn(){
  console.log(6)}Copy the code

The result is:

2. 11. 10. 9Copy the code

Guest officer can draw a picture to sort out the idea, and then run the code to verify 💨

Reference & later

  • Juejin. Cn/post / 684490…

  • Juejin. Cn/post / 684490…

  • Juejin. Cn/post / 684490…

Article first javascript event loop mechanism, more content, please poke my blog for understanding, can leave a star would be better 💨