Event loop

Event loop

例子1

console.log('start');
 
var intervalA = setInterval(() => {
  console.log('intervalA');
}, 0);
 
setTimeout(() => {
  console.log('timeout');
 
  clearInterval(intervalA);
}, 0);
 
var intervalB = setInterval(() => {
  console.log('intervalB');
}, 0);
 
var intervalC = setInterval(() => {
  console.log('intervalC');
}, 0);
 
new Promise((resolve, reject) => {
  console.log('promise');
 
  for (var i = 0; i < 10000; ++i) {
    i === 9999 && resolve();
  }
 
  console.log('promise after for-loop');
}).then(() => {
  console.log('promise1');
}).then(() => {
  console.log('promise2');
 
  clearInterval(intervalB);
});
 
new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise in timeout');
    resolve();
  });
 
  console.log('promise after timeout');
}).then(() => {
  console.log('promise4');
}).then(() => {
  console.log('promise5');
 
  clearInterval(intervalC);
});
 
Promise.resolve().then(() => {
  console.log('promise3');
});
 
console.log('end');

start
promise
promise after for-loop
promise after timeout
end
promise1
promise3
promise2
intervalA
timeout
intervalC
promise in timeout
promise4
promise5

详细讲解分析：

识别log一般函数方法，输出“start”（1）；
识别intervalA、setTimeout、intervalB、intervalC为特殊的异步方法，依次放入宏任务队列1，并设置了一个 0ms的立即执行标识；
识别new promise的resolve方法为一般方法，输出“promise”（2）、“promise after for-loop”（3）；
识别.then()方法为特殊的异步方法，放入微任务队列1；
识别new promise的resolve方法里面的setTimeout，放入宏任务队列1，输出“promise after timeout”（4）；
识别promise的.then()方法，放入微任务队列1；
识别log一般函数方法，输出“end”（5）；
识别微任务队列1，执行.then()方法，输出“promise1”（6），识别.then()方法，将其放入微任务队列1的队尾；
继续识别微任务队列1，执行promise的.then()方法，输出“promise3”（7），识别微任务队尾，执行.then()方法，输出“promise2”（8）并清除定时器intervalB；
微任务队列1执行完毕，识别宏任务队列1，识别intervalA，输出“intervalA”（9）；识别setTimeout，输出“timeout”（10）并清除定时器intervalA；识别intervalC，输出“intervalC”（11）；执行setTimeout，输出“promise in timeout”（12）。宏任务结束；
识别new promise的resolve方法里面的setTimeout，根据其.then()方法，输出“promise4”（13）；识别.then()方法并将其放置微任务队列队尾，执行并输出“promise5”（14）。

例子2

Promise.resolve(1).then(res=>console.log(123)).then(res=>console.log(456))
Promise.resolve(2).then(res=>console.log('abc')).then(res=>console.log('def'))

// 第一轮 把 123 abc 放入
// 第二轮 把 456 def 放入

// 123  abc  456 def

例子3

node 是18.12版本

console.log("1");
setTimeout(function () {
	console.log("2");
	process.nextTick(function () {
		console.log("3");
	});
	new Promise(function (resolve) {
		console.log("4");
		resolve();
	}).then(function () {
		console.log("5");
	});
});

new Promise(function (resolve) {
	console.log("7");
	resolve();
}).then(function () {
	console.log("8");
});
process.nextTick(function () {
	console.log("6");
});

setTimeout(function () {
	console.log("9");
	process.nextTick(function () {
		console.log("10");
	});
	new Promise(function (resolve) {
		console.log("11");
		resolve();
	}).then(function () {
		console.log("12");
	});
});

1 7 6 8 2 4 3 5 9 11 10 12