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 가 전달 하 는 함수 – 이해 가 되 는 지 모 르 겠 습 니 다).⚠️매크로 작업 은 자바 script 엔진 이 숙주 환경 분 배 를 기다 리 는 거시적인 작업 입 니 다.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 에 직접 썼 습 니 다. 신호등 의 변 화 는 1 초 변색 이 고 순서 가 틀 렸 습 니 다. 기다 리 지 않 은 것 같 습 니 다. 왜 이 결과 인지 아직도 생각 하고 있 습 니 다.