예제

![console2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255229/16525369-8ace-464b-46dc-76b4435e7db0.png)
var r = new Promise(function(resolve, reject){
    console.log("a");
    resolve();
});
setTimeout(()=>console.log("d"), 0)
r.then(() => console.log("c"));
console.log("b");

실행하면 그래요.

console.log("d")의 consolelog ("c") 가 먼저 실행되었습니까?왜 그랬을까?

event-loop

전제로 자바스크립트는 단식 레드이기 때문에 병행 처리할 수 없다.따라서, 막히지 않도록 호출 창고에 추가하고 실행합니다.이미지는 다음과 같습니다.
(이벤트-loop의 이미지from「Help, I’m stuck in an event-loop」
(이 블로그JS 기본 보조 호출는 약간의 총결을 하였으며, 참고만 제공한다.)

Macro 작업 및 Microsoft 작업

promise와 set Timeout은 호출 함수를 본식육에 등록하지만,promise와 같은 node에 등록합니다.js 환경에서 제공하는 함수는 마이크로로 작업으로 이블라도에 로그인합니다.(브라우저 환경에서 제공될 수도 있음) set Timeout은 Macro 작업으로 이본트로에 로그인합니다.

- mcro 작업: 본 커튼의 입도로 로그인 가능(상기 노란색 부분)
- Microsoft 작업: 작은 크기의 Mac 작업에 저장
promise는 마이크로소프트 작업을 생성하고 실행을 기다리는 이본트로 작업에 삽입하지만 set Timeout은 새로 만든 Macro 작업으로 이본트로에 로그인하라는 지시입니다.

용도

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

일반적인 경우: Promise를 사용하여 setTimeout을 비동기적으로 만듭니다.
실행 순서는 다음과 같습니다.
Macro 작업 실행 1
②console.log("a") 실행;
③console.log("b") 실행;
④ setTimeout에 Macro 작업 등록
⑤ resolve 실행
⑥ then 내의 constorelog("c") 처리 실행
따라서 a->b->c를 출력합니다.
※ sleep(0)이라도 a-&b->c 순으로 출력합니다.

참고 자료

1.winter.2019.relearning front-end