阅读 29

js事件循环机制-宏任务和微任务

基础知识:
    宏任务: 
	js整体代码, setTimeout, setInterval……
    微任务:
	Promise……
    任务优先级:
        js整体代码(包括promise) > promis.then > setTimeout > setInterval

宏任务和微任务的理解:
    微任务挂载到当前宏任务中,是当前宏任务的跟屁虫,执行到当前宏任务时会执行掉当前宏任务下的所有
微任务;把js事件执行机制理解为旅游买票,宏任务相当于旅行团的导游买票,微任务相当于旅行团的成员,散客相
当于瞬间执行的正常代码售票员(js执行)遇到散客(正常的瞬时执行代码)时,按顺序执行,当遇到导游(宏任务)时,
先让其(宏任务)在一边排队等候(任务队列),直到散客(整体代码)处理完后再按照导游排队(任务对立)去处理导游
(宏任务)的业务.每个导游(宏任务)后面又代表着多个旅行团成员(微任务),执行每个导游和其所代表的成员的业务
(即一个宏任务及其后面跟着的微任务)称为一个事件循环;
复制代码

例1:

console.log('start');

setTimeout(function() {
	console.log('setTimeout');
}, 0);

Promise.resolve()
	.then(function() {
		console.log('promise1');
	})
	.then(function() {
		console.log('promise1');
	})

console.log('end');

// 执行过程理解:
// 	1.console.log('start');   ====   立即执行;
// 	2.setTimeout  ====  挂载到宏任务setTimeout,console.log('setTimeout')是这个宏任务里面的微任务;
// 	3.Promise  ====  挂载到当前宏任务(即js整体代码);
// 	4.console.log('end'); ==== 立即执行;

// 	当前任务队列:
// 	    宏任务一: js整体代码 {
// 			Promise(promise1, promise2);
// 	    }
// 	    宏任务二:setTimeout{
// 		console.log('setTimeout');
// 	    }

// 	执行结果:
// 	    根据任务优先级:
// 		start,end,promise1,promise2,setTimeout
复制代码

例2:

setInterval(() => {
	if (!flag) {
		console.log(6)
		flag = true
	}
}, 1000)

setTimeout(function() {
	console.log(1)
}, 0);

new Promise(function executor(resolve) {
	console.log(2);
	for (var i = 0; i < 10000; i++) {
		i == 9999 && resolve();
	}
	console.log(3);
}).then(function() {
	console.log(4);
});

console.log(5);

// 解析:
// 执行顺序: setInterval(挂起) --> setTimeout(挂起) --> Promise(执行),但.then(挂起) 
             --> console.log(执行)--> .then(执行) --> setTimeout(执行) --> setInterval(执行)
// 结果:2,3,5,4,1,6
复制代码
文章分类
前端
文章标签