JavaScript同步、异步和process.nextTick、setImmediate面试题

比眉伴天荒 2023-10-06 17:44 56阅读 0赞

## 一、基础：同步程序执行完再执行异步程序 ##

## 二、执行顺序 ##

![在这里插入图片描述][5fafb15c4d134b9db88d2b0580060a2d.png]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]

## 三、事件循环 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]

## 四、宏任务和微任务（异步） ##

js是单线程

### 4.1、宏任务（异步） ###

分类：  
1、计时器：setTimeout，setInterval  
2、Ajax  
3、读取文件

### 4.2、微任务（异步） ###

分类：  
1、process.nextTick也是微任务，这里顺序只是为了理解方便单独提出来了  
2、Promise().then(回调)，  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_10_color_FFFFFF_t_70_g_se_x_16]

### 4.3、Promise和async、await ###

#### 4.3.1、Promise（微任务） ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]

#### 4.3.2、async、await （微任务） ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]

### 面试题一、 ###

async function async1() {
        
    	console.log('async1 start');
    	await async2();
    	console.log('async1 end');
    }
    async function async2() {
        
    	console.log('async2');
    }
    
    console.log('script start');
    
    setTimeout(function() {
        
    		console.log('setTimeout');
    	},0)
    	
    async1();
    
    new Promise(function(resolve) {
        
    	console.log('promisel');//这里面的代码时同步的
    	resolve();
    }).then(function() {
        //then里面的代码才是异步的
    	console.log('promise2');
    });
    
    console.log('script end');

![在这里插入图片描述][20210513171128690.png]  
或（浏览器的原因，ie8以上的浏览器先输出then再执行其他）  
![在这里插入图片描述][20210522090430822.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]

### 面试题二、 ###

script start  
async1 start  
async2  
script end  
async1 end  
setTimeout  
三、

![在这里插入图片描述][20210522091327519.png]

[5fafb15c4d134b9db88d2b0580060a2d.png]: https://img-blog.csdnimg.cn/5fafb15c4d134b9db88d2b0580060a2d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/066e2a949b0e40cc8074fa56eea75860.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/c3dd2a54315c45a2b871c59b1caeb4df.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e21f67bcc2b7411badbd5b6c911b6792.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/970a723573fa4ab4a7802e7d6bd499fa.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/d1391b36df974e04ab0f16157181cd24.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5rGf5bee55uK5b2k_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8ed0f928b9a54f57be41df1f26635755.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGf5bee55uK5b2k,size_18,color_FFFFFF,t_70,g_se,x_16
[20210513171128690.png]: https://img-blog.csdnimg.cn/20210513171128690.png
[20210522090430822.png]: https://img-blog.csdnimg.cn/20210522090430822.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210513171321434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA4NDk4Ng==,size_16,color_FFFFFF,t_70
[20210522091327519.png]: https://img-blog.csdnimg.cn/20210522091327519.png