//콜백 지옥
setTimeout(() => {
console.log("처리중");
setTimeout(() => {
console.log("여전히");
setTimeout(() => {
console.log("곧 완료");
render("렌더링~!");
}, 1000);
}, 2000);
}, 3000);
//
setTimeout(3); // 이부분이 ...끝나야
console.log("처리중");
setTimeout(2); // 이부분이 ...끝나야
console.log("여전히");
setTimeout(1); // 이부분이 ...끝나야
console.log("곧 완료");
render("렌더링~!");
otherLogic(); // 비로소 이게 실행되고
otherLogic2(); // 비로소 이게 실행되고,,, 너무 늦게 즉,동기적이기떄매, 코드가 블락킹 됨.
// 콜백 지옥을 해결하기 위해 Promise 씀
//지켜보기 -> 콜백등록 -> 완료통보 -> 콜백실행
//프로미스 코드 예제>
const render = () => console.log("rendering...");
const timeout = (time) => (resolve, reject) => {
setTimeout(() => resolve("promise :"), time); // 3.resolve는 resolve가 불리면, 완료가 됫다는걸 통보, 표시해줍니다.
};
const delay = (time) => new Promise(timeout(time)); // 1.프로미스는 셋타임아웃 지켜보기
delay(3000)
.then((msg) => {
// 4. 콜백 실행
// 2.then은 콜백을 등록함 왜냐면 셋타임아웃 시간이 되면 이부분을 실행해 줘야기떄매 등록을 해놓음
console.log(msg + "처리중");
return delay(2000);
})
.then((msg) => {
// 4. 콜백 실행
// 2.then은 콜백을 등록함
console.log(msg + "여전히");
return delay(1000);
})
.then((msg) => {
// 4. 콜백 실행
// 2.then은 콜백을 등록함
console.log(msg + "곧완료");
render();
});
