最简单快速理解Promise与setTimeout

Promise

MDN上的例子稍稍变化：

var p = new Promise(function(resolve, reject){
	setTimeout(function(){
		resolve("foo");
		console.log("first");
	}, 1000);
});

p.then(function(value){
	console.log(value);
});

需要理解几点：
1、定义Promise的时候在传递的函数内部调用resolve/reject，而真正执行的时刻是调用Promise.then()的时候；（我的理解是定义Promise的时候，同步执行new中的function，执行到resolve时状态由pending变为fulfilled，将回调函数放置到微任务队列中，执行完当前宏任务后，到微任务队列中执行，执行的是then中传递的函数，如果是reject则执行catch传入的函数 – 不知道理解对不对）;
⚠️宏任务是JavaScript 引擎等待宿主环境分配的宏观任务；JS引擎自己发起的是微任务。

写不写resolve的区别，以及多次then：

var p = new Promise(function(resolve, relect){
	resolve();
});
p.then(function(){console.log("a");}).then(function(){console.log("b");});

对比

var p = new Promise(function(resolve, relect){
});
p.then(function(){console.log("a");}).then(function(){console.log("b");});

2、执行队列中微任务（如Promise）的执行先于宏任务（如setTimeout），微任务在本次循环尾部执行，宏任务在下次循环执行，看下面的例子：

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        console.log("b");
        setTimeout(resolve,duration);
    })
}
console.log("a");
var s = sleep(2000);
setTimeout(function(){console.log("wait")},2000);
s.then(()=>console.log("c"));

相同秒数，c总在wait前打印；不同秒数时快的先打印。

检验理解效果：
https://www.cnblogs.com/mengfangui/p/8670698.html（文中有两道题可以做一下）

⚠️在学习async/await时有一个问题，await等的是resolve执行完？(如果是setTimeout之类的，是不等待的，如果setTimeout中传入resolve会等待resolve执行完)

var oDiv = document.getElementsByTagName("div")[0];
function sleep(color, duration){
	return new Promise(function(resolve, reject){
		console.log(color);
		setTimeout(resolve,duration);
	}).then(function(){
		oDiv.className = color;
	})
}
async function lightOff(){
	while(true){
		await sleep("yellow", 3000);
		await sleep("red", 1000);
		await sleep("green", 2000);
	}
}
lightOff();

思考：一开始写错了，没有写return，resolve函数直接写在setTimeout里了，红绿灯的变化是一秒变色，且顺序不对，看似没有等待，为什么是这个结果还在思考。