同步和异步的执行顺序

悠悠 2023-01-19 12:58 1阅读 0赞

## 同步和异步的执行顺序 ##

*  **首先展示一段代码**

console.log('start')   //第一个执行
    
    setTimeout(() => {   //排队
    		console.log('e'),
    			new Promise(resolve => {
    					resolve()
    			})
    			.then(res => {
    				console.log('f')
    			})
    				console.log('g')
    }, 100)
    
    a().then(() => {  
     //这里的时候执行a方法  先别看.then的这部分。因为是需要resolve才会执行.then  刚刚b.then执行了resolve  因为是return给a方法的 这个时候.then是异步我们放队列
    		console.log('a_then')
    })
    
    function a() {
    	console.log('a_function')  //输出这个
    	return b().then((res) => {   // 然后到这里 执行b方法 这时候也别看.then因为还没resolve 到这里来  本来按照正常来说要执行这里 但是因为.then是异步 把他放队列  好继续往下看。
    			console.log('res')
    			console.log('b.then')
    			return Promise.resolve('a返回')
    	})
    }
    
    function b() {
    		console.log('b_function')   //到了b方法了 执行这个
    		return Promise.resolve('b返回')  //他promise.resolve了一个b返回这个时候我们再回去
    }
    
    setTimeout(() => {   //settimeout 每次都是最后执行的先不管我们继续
    	  console.log('c')
    	  new Promise(resolve => {
    				console.log('d')
    				resolve()
    		})
    		.then(() => {
    				console.log('g')
    		})
    })
    
    new Promise(resolve => {   //到了这里 欸 promise内部的代码是同步执行先把1输出了 然后有个resolve  这个时候.then也是异步 先不管 放队列
    		console.log('1')
    		resolve()
    })
    .then(res => {
    		console.log('4')
    			setTimeout(() => {
    					console.log('2')
    			}, 0)
    			console.log('3')
    })
    
    //然后同步的执行完了. 我们看异步队列里面的任务  为了完善我把settimeout也加上

*  **然后我们开始看队列里面的代码 异步分为宏任务 跟微任务 微任务先执行 在宏任务 好我们分开一下把宏跟微**
 *  **宏任务**

setTimeout(() => {   
    	console.log('e'),
    	new Promise(resolve => {
    		resolve()
    	})
    	.then(res => {
    			console.log('f')
    	})
    		console.log('g')
    }, 100)
    			
    setTimeout(() => {   //settimeout 每次都是最后执行的先不管我们继续
    		console.log('c')
    		new Promise(resolve => {
    				console.log('d')
    				resolve()
    		})
    		.then(() => {
    				console.log('g')
    		})
    })
    			
    setTimeout(() => {
    		console.log('2')
    }, 0)

*  **微任务**

//第一个进到队列的先执行 
    .then((res) => {
    		console.log('res')
    		console.log('b.then')
    		return Promise.resolve('a返回')
    })
    			
    //输出 res  b.then 欸 这里放回了一个promise.resolve  我们回去继续看方法.  好 这个时候b.then已经执行完了.我们把他删除了.
    //然后看第二个
    .then(res => {
    		console.log('4')
    		setTimeout(() => {
    			console.log('2')
    		}, 0)
    		console.log('3')
    })
    //输出 4  欸有个settimeout 是异步 我们放队列  然后继续输出3  第二个执行完了 我们把第二个删除了
    			
    			
    //然后看第三个
    .then(() => {
    		console.log('a_then')
    })
    //输出a_then 然后删除

> 异步代码先执行微任务再执行宏任务  
> promise要resolve才会看.then！！！  
> 没resolve永远都不会到.then  
> 就把.then当成一个卑微仔。需要我resolve了才到.then然后把.then放任务队列。

答案：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0plbm55X2xqag_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0plbm55X2xqag_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/5a12ea324c3043a59c9e5a59b0e124d8.png