1
2023-04-16
#JavaScript

Async非同步 - callback, promise, async-await 練習

題目

紅燈三秒亮一次,綠燈兩秒亮一次,黃燈一秒亮一次;如何讓三個燈不斷交替重複亮燈?

如下面這樣:
過三秒 過兩秒 過一秒 過三秒 過兩秒 .....

三個亮燈函數已經存在:

function red() {
  console.log('red    - ', new Date());
}

function green() {
  console.log('green  - ', new Date());
}

function yellow() {
  console.log('yellow - ', new Date());
}

- Callback 寫法

function callbackLoop() {
  setTimeout(() => {
    red();
    setTimeout(() => {
      green();
      setTimeout(() => {
        yellow();
        callbackLoop();
      }, 1000);
    }, 2000);
  }, 3000);
}

callbackLoop();

- Promise 寫法

const ticker = (second, func) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      func();
      resolve();
    }, second * 1000);
  });
};

function promiseLoop() {
  const redPromise = ticker(3, red);
  redPromise
    .then(() => {
      const greenPromise = ticker(2, green);
      return greenPromise;
    })
    .then(() => {
      const yellowPromise = ticker(1, yellow);
      return yellowPromise;
    })
    .then(() => {
      promiseLoop();
    });
}

promiseLoop();

- Async/await 寫法

async function awaitLoop() {
  await ticker(3, red);
  await ticker(2, green);
  await ticker(1, yellow);
  awaitLoop();
}

awaitLoop();
main*
© 2024 All Rights Reserved. IRIS Studio