Promise實現一個紅綠燈

語言: CN / TW / HK

一起養成寫作習慣!這是我參與「掘金日新計劃 · 4 月更文挑戰」的第15天,點擊查看活動詳情

Promise在ES6中是一個比較常見的東西,它不僅可以用來處理多個接口相互依賴請求,解決地獄回調的問題,還能在很多場景中進行應用,今天我們就以一個Promise實現紅綠的的實例來作為對Promise異步作用的學習,同時配合async awiat的使用進行實現

需求分析

首先我們分析以下紅綠燈的實現過程需要哪些東西,第一是三個紅綠黃三個顏色的燈,然後每個燈之間會進行切換,比如綠燈5s亮然後黃燈亮2s,最後是紅燈3s,一個流程過後則是進行一個循環,重新到綠燈亮。 1. 三種顏色進行亮燈 2. 定時時間 3. 循環切換

首先設置一個定時器接收亮燈和亮燈的時間,我們需要用到一個定時器函數接收倆個參數,亮燈顏色和亮燈時間,然後設置一個Promise,由於Promise是一個異步操作,只有發生狀態響應的時候,才會繼續執行後續的操作,那麼我們先在Promise中將顏色打印出來,然後通過一個定時器設置時間延時,延時相當於就是亮燈的時間,因為我們亮燈了,然後延時,就會造成一種燈在這段時間一直亮着的效果 js async function timer(color,delay){ return new Promise((res,rej)=>{ console.log(color) setTimeout(() => { res() }, delay); }) } 從上面操作我們可以看出我們聲明瞭一個異步函數,返回了一個Promise,亮燈後定時進行resolve(),才能進入到下一步驟,所以我們已經完成了亮燈和延時,現在我們對三個顏色的燈配合async await進行三個燈的實現

js async function light(){ await timer('green',1000) await timer('yellow',2000) await timer('red',3000) } 我們可以看到現在三個燈是三個獨立的異步函數,分步進行執行,由於await返回的也是一個Promise,所以awit的函數必須執行完才能執行下一個函數,這樣就是為什麼上面會用到定時器調用res()的原因了,只有上一個燈執行完才能進行下一個燈,現在三個燈理論上已經是可以按順序切換顯示的了,最後我們給他進行循環顯示

```js async function light(){ await timer('green',1000) await timer('yellow',2000) await timer('red',3000) await light()

} light() ``` 我們在代碼塊中讓切換燈的函數在最後調用自己,這樣每一個循環結束都會開始重新調用