快捷導(dǎo)航

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

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

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

引言

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

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

問題拆解

紅綠燈在我們?nèi)粘Ｉ钍浅Ｒ姷?，因此?duì)于問題大家是容易理解的，我們此次需要考慮如何模擬紅綠燈的無間斷切換和輪詢過程。

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

代碼設(shè)計(jì)

//模擬異步請(qǐng)求資源
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è)計(jì)還是比較簡(jiǎn)單，我這里使用了數(shù)組對(duì)象對(duì)紅綠燈進(jìn)行了數(shù)據(jù)封裝，為了模擬紅綠燈的不間斷轉(zhuǎn)換使用while循環(huán)，內(nèi)部為了讓彼此進(jìn)行循序漸進(jìn)的交替變化，將異步的方式轉(zhuǎn)換為同步代碼塊，此次使用的方法就是for await 完成的。

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

您可能感興趣的文章: