callback vs promise vs async & await

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
}

 

1. callback함수

function runCallback() {
  resetTitle(); //1. 제목 초기화
  playVideo(); //1. 비디오 재생

  delay(1000, () => {
    pauseVideo(); //2. 1초 후, 비디오 멈춤
    displayTitle(); //2. 비디오멈추고, 제목 표시

    delay(500, () => { 
      highlightTitle(); //3. 0.5초 후, 제목 강조

      delay(2000, resetTitle); //2초 후, 제목 초기화
    });
  });
}​

 

2. Promise

function runPromise() {
  resetTitle(); // 1. 제목 초기화
  playVideo(); // 1. 비디오 재생

  sleep(1000)
    .then(() => {
      pauseVideo(); // 2. 1초 후, 비디오 멈춤
      displayTitle(); //2. 제목 보여줌
   })
    .then(sleep.bind(null, 500)) // 3. sleep(500). 0.5초 쉰다.
    //첫번째 인자를 500으로 고정시킨다는 말. 즉, sleep함수의 인자를 500으로 준다. 
    .then(highlightTitle) // 3. 0.5초 쉰 후 제목 강조
    .then(sleep.bind(null, 2000)) // 4.2초 쉰다.
    .then(resetTitle) //4. 2초 쉰 후, 제목 초기화
}

 

3. async & await

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
}


async function runAsync() {
  resetTitle(); //1. 제목 초기화
  playVideo(); //1. 비디오 재생

  await sleep(1000); //2. await 다음에는 Promise객체가 와야. 1초 쉼.
  pauseVideo(); //2. 비디오 멈춤
  displayTitle(); //2. 제목 보여줌

  await sleep(500); //3. 0.5초 쉼
  highlightTitle(); // 3. 제목 강조

  await sleep(2000); //4. 2초 쉼
  resetTitle(); //4. 제목 초기화
}