setTimeout和promise

最新推荐文章于 2024-10-25 14:40:00 发布

原创最新推荐文章于 2024-10-25 14:40:00 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

本文详细解析了JavaScript中宏任务和微任务的工作机制，包括它们如何被放置在任务队列中，以及事件循环如何处理这些任务。通过具体的代码示例说明了Promise与setTimeout等API在执行顺序上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1>两个异步队列不一样，promise所在的异步队列优先级要高一点。

setTimeout(function(){
	console.log(1);
},0);
new Promise(function executor(resolve){
	resolve();
}).then(function(){
	console.log(2);
})//2,1

解释下面的代码：创建promise实例是同步执行的，所以输出1,2,3，但是promise.then和setTimeout是异步执行的，promise所在的异步队列优先级要高一点。

(function test(){
	setTimeout(function(){
		console.log(4);
	},0)
	new Promise(function(resolve){
		console.log(1);
		for(var i=0;i<1000;i++){
			i==999&&resolve();
		}
		console.log(2)
	}).then(function(){
		console.log(5)
	});
	console.log(3);
})()//1,2,3,5,4

但是在不同浏览器输出的顺序不同（修复了这个问题）

2>Event Loop怎么处理macrotask（宏任务）和microtask（微任务）

任务队列分为microtasks和macrotasks

microtasks： peomise,Object.observe...

macrotasks: setTimeout,setInterval,I/O,UI渲染

Task queue==macrotask queue！=micotask queue

每一个事件循环（event loop）都有一个microtasks

一个任务task可以放在macrotask queue也可以放在micotask queue

执行与原理：它从整体代码开始第一次循环，之后全局上下文进入函数调用栈，直到函数调用栈清空，然后执行所有的micro-task，当所有可执行的micro-task执行完毕后。循环再次从macro-task开始，找到其中一个任务队列执行完毕，然后在执行所有的macro-task，这样一直循环下去。