2023-04-16
#JavaScriptAsync非同步 - 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();