비동기 실행순서 연습하기

예시 1

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(4, 5, (a_res) => {
  console.log("A Result : ", a_res);
});

taskB(5, (b_res) => {
  console.log("B Result : ", b_res);
});

taskC(6, (c_res) => {
  console.log("C Result : ", c_res);
});

console.log("코드 끝 ! ");

//코드 끝 ! 
//1초 후에 B Result :  10
//2초 후에 C Result :  -6
//3초 후에 A Result :  9

- 예시 2

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(4, 5, (a_res)  => {
  console.log("A Result : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("B Result : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("C Result :", c_res);
    });
  });
});

console.log("코드 끝 ! ");

//코드 끝 ! 
//3초 후에 A Result :  9
//1초 후에 B Result :  18
//2초 후에 C Result : -18

A, B, C 순서대로 결과값을 얻기 위해서는 콜백함수를 통해서 코드를 작성해주면 되는데,

이런식으로 코드를 작성할 경우에 콜백지옥이 펼쳐질 수 있다.