JS的事件循环机制

梦里梦外; 2024-04-06 11:12 60阅读 0赞

## 一 JS的运行机制 ##

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

## 二 同步与异步的产生原因 ##

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

### 2.1同步(阻塞) ###

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

### 2.2异步(非阻塞) ###

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

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

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

## 三 JS中的宏任务与微任务 ##

### 常见的宏任务与微任务 ###

宏任务: setTimeout setInterval ajax Dom事件

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

![95fc227c35f24139a85f40d60bdb0a3c.png][]

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

小案例：

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

[95fc227c35f24139a85f40d60bdb0a3c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/dfde7e7262564246a8a778d8883df2d4.png