JS的事件循环机制

一 JS的运行机制

JavaScript是一门单线程语言，单线程意味着在一个时间点内只能做一件事。

二 同步与异步的产生原因

因为JS是单线程的，同一时间只能做一件事，JS引擎就会有多余的时间，为了解决单线程所造成的这个问题，提出了同步和异步的执行模式。

2.1同步(阻塞)

同步执行模式就是JS会严格按照原本单线程逻辑，从上到下，从左到右的执行代码逻辑。

2.2异步(非阻塞)

在执行JS代码时先逐步执行同步代码，遇到异步代码先将异步代码放到任务队列中，直到同步代码执行完璧才执行异步代码。

小结：JS执行顺序按照单线程模式运行，同步先执行，异步后执行。所有的异步任务都要等待当前的同步任务执行完成后执行。

任务队列中将异步任务划分为宏任务和微任务。

三 JS中的宏任务与微任务

常见的宏任务与微任务

宏任务: setTimeout setInterval ajax Dom事件

 微任务:promise.then/finally/catch   async/await 隐式创建promise.then

 

事件循环主要是针对解决宏任务，一次事件循环只能处理一个宏任务，执行宏任务的时候会进行一次轮询，看有没有微任务，如果有微任务将会把微任务执行全部执行完毕，在执行宏任务。

小案例：

1：

// // 事件循环 
setTimeout(function () {   //setTimeout 宏任务
  console.log('1');
});
async function test(){
	console.log('5')
	await async2();
	// 隐式创建一个微任务 promise.then()
	console.log('6')
}
new Promise(function (resolve) {
  console.log('2');
  resolve();
}).then(function () {
  console.log('3');
}).finally(()=>{
	console.log('8');
})
function async2(){
	console.log('7');
}
test()
console.log('4');

//2 5 7 4 3 6 8 1

2：

async function async1() {
  console.log(1);
  const result = await async2();
//   隐式创建一个微任务 相当于promise.then()
  console.log(3);
}
async function async2() {
  console.log(2);
}
Promise.resolve().then(() => {
  console.log(4);
});
setTimeout(() => {
  console.log(5);
});
async1();
console.log(6); 

// 1 2 6 4 3 5