面试官:你能用异步模拟红绿灯?

·  阅读 5351

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第5天,点击查看活动详情

引言

异步的问题是程序员绕不开的话题,无论在实际开发上还是在面试中,我们总会遇到各种蛋疼的问题,但是细细品味,其实这些问题总能拓展我们的思路,激发我们的思维能力。培养我们的高情商能力。(我日,我编不下去了)红绿灯模拟在异步问题上是经典中的经典,网络上的设计也是层出不穷,我将给大家呈现一款比较独特的设计。

问题拆解

红绿灯在我们日常生活是常见的,因此对于问题大家是容易理解的,我们此次需要考虑如何模拟红绿灯的无间断切换和轮询过程。首先分析,我们可以通过while循环让红绿灯不间断循环,接住我们使用for await语法可以让红绿灯异步切换成同步的改变。

代码设计

//模拟异步请求资源
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)
    }
  }
}

//数据封装式的调用
lightTransform([
  {color:"red",delay:1000},
  {color:"green",delay:2000},
  {color:"yellow",delay:3000}
])
复制代码

效果演示

3.gif

核心讲解

其实整体的设计还是比较简单,我这里使用了数组对象对红绿灯进行了数据封装,为了模拟红绿灯的不间断转换使用while循环,内部为了让彼此进行循序渐进的交替变化,将异步的方式转换为同步代码块,此次使用的方法就是for await 完成的。

总结

谢谢各位爷的耐心浏览,如果感觉确实润,您就动动您宝贵的手给我点点举报,说错了啊是点点赞,点点关注。

分类:
前端
收藏成功!
已添加到「」, 点击更改