>[success] # 異步紅綠燈問題 ~~~ 1.紅燈3s 亮一次，綠燈1s亮一次，黃燈2s亮一次，讓三個燈不斷重復 ~~~ >[info] ## 代碼分析 ~~~ 1.將整體部分抽離 ~~~ ~~~ function red(){ console.log('red') } function green(){ console.log("green"); } function yellow(){ console.log("yellow"); } ~~~ >[danger] ##### 寫法一 ~~~ const task = (timer,light,callback) =>{ setTimeout(()=>{ if(light === "red"){ red() }else if(light === "green"){ green() }else{ yellow() } callback() },timer); } // 只能一次 task(3000,'red',()=>{ task(2000,'green',()=>{ task(1000,'yellow',Function.prototype) }) // 想循環 你要循環的是整體這個整體 const step = ()=>{ task(3000,'red',()=>{ task(2000,'green',()=>{ // 我在將整組循環調用 task(1000,'yellow',step) }) }) } step() ~~~ >[danger] ##### 寫法二 ~~~ // 通過 new Promise 來做 const task = (timer,light)=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ if(light === "red"){ red() }else if(light === "green"){ green() }else{ yellow() } resolve() },timer); }) } const setp = ()=>{ task(3000,'red').then(_=>{ task(2000,'green').then(_=>{ task(1000,'yellow').then(setp) }) }) } setp() ~~~ >[danger] ##### 寫法三 ~~~ // 通過 new Promise 來做 const task = (timer,light)=>{ return new Promise((resolve,reject)=>{ setTimeout(()=>{ if(light === "red"){ red() }else if(light === "green"){ green() }else{ yellow() } resolve() },timer); }) } // 通過async 和 await const taskRunner = async ()=>{ await task(3000,'red') await task(3000,'green') await task(3000,'yellow') taskRunner() } taskRunner() ~~~