JS面試異步模擬紅綠燈實現(xiàn)詳解

更新時間：2023年01月10日 10:24:45 作者：前端蘭博

這篇文章主要為大家介紹了JS面試異步模擬紅綠燈實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

異步的問題是程序員繞不開的話題，無論在實際開發(fā)上還是在面試中，我們總會遇到各種頭疼的問題，但是細(xì)細(xì)品味，其實這些問題總能拓展我們的思路，激發(fā)我們的思維能力。培養(yǎng)我們的高情商能力。

（我，我編不下去了）紅綠燈模擬在異步問題上是經(jīng)典中的經(jīng)典，網(wǎng)絡(luò)上的設(shè)計也是層出不窮，我將給大家呈現(xiàn)一款比較獨特的設(shè)計。

問題拆解

紅綠燈在我們?nèi)粘Ｉ钍浅Ｒ姷模虼藢τ趩栴}大家是容易理解的，我們此次需要考慮如何模擬紅綠燈的無間斷切換和輪詢過程。

首先分析，我們可以通過while循環(huán)讓紅綠燈不間斷循環(huán)，接住我們使用for await語法可以讓紅綠燈異步切換成同步的改變。

代碼設(shè)計

//模擬異步請求資源
function loadSource (target) {
  return new Promise((resolve,reject)=>{
    setTimeout(() => {
      resolve(target.color)
    }, target.delay);
  })
}
//核心的紅綠燈邏輯
async function lightTransform (lights) {
  while(true) {
    for(let i=0;i<lights.length;i++) {
      let res = await loadSource(lights[i])
      console.log(res)
    }
  }
}
//數(shù)據(jù)封裝式的調(diào)用
lightTransform([
  {color:"red",delay:1000},
  {color:"green",delay:2000},
  {color:"yellow",delay:3000}
])

效果演示

核心講解

其實整體的設(shè)計還是比較簡單，我這里使用了數(shù)組對象對紅綠燈進行了數(shù)據(jù)封裝，為了模擬紅綠燈的不間斷轉(zhuǎn)換使用while循環(huán)，內(nèi)部為了讓彼此進行循序漸進的交替變化，將異步的方式轉(zhuǎn)換為同步代碼塊，此次使用的方法就是for await 完成的。

以上就是JS面試異步模擬紅綠燈實現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于JS面試異步模擬紅綠燈的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: