JS面试异步模拟红绿灯实现详解

 更新时间:2023年01月10日 10:24:45   作者:前端兰博  
这篇文章主要为大家介绍了JS面试异步模拟红绿灯实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

引言

异步的问题是程序员绕不开的话题,无论在实际开发上还是在面试中,我们总会遇到各种头疼的问题,但是细细品味,其实这些问题总能拓展我们的思路,激发我们的思维能力。培养我们的高情商能力。

(我,我编不下去了)红绿灯模拟在异步问题上是经典中的经典,网络上的设计也是层出不穷,我将给大家呈现一款比较独特的设计。

问题拆解

红绿灯在我们日常生活是常见的,因此对于问题大家是容易理解的,我们此次需要考虑如何模拟红绿灯的无间断切换和轮询过程。

首先分析,我们可以通过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}
])

效果演示

核心讲解

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

以上就是JS面试异步模拟红绿灯实现详解的详细内容,更多关于JS面试异步模拟红绿灯的资料请关注程序员之家其它相关文章!

相关文章

  • 微信小程序 window_x64环境搭建

    微信小程序 window_x64环境搭建

    这篇文章主要介绍了微信小程序 window_x64环境搭建的相关资料,需要的朋友可以参考下
    2016-09-09
  • 跨域设置Cookie失效问题解决方案原理分析

    跨域设置Cookie失效问题解决方案原理分析

    这篇文章主要为大家介绍了跨域设置Cookie失效问题解决方案原理分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 微信小程序 小程序制作及动画(animation样式)详解

    微信小程序 小程序制作及动画(animation样式)详解

    这篇文章主要介绍了微信小程序 小程序制作及动画详解的相关资料,这里对小程序制作进行了详解,介绍动画部分的知识,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 setData的使用方法详解

    微信小程序 setData的使用方法详解

    这篇文章主要介绍了微信小程序 setData的使用方法详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • Javascript 解构赋值详情

    Javascript 解构赋值详情

    这篇文章主要介绍了Javascript 解构赋值详情,解构赋值是ES6中的特性,可以将对象或数组中的值同时赋值给多个变量。西阿棉一起来看看详细内容吧,需要的朋友可以参考下
    2021-11-11
  • JavaScript的八种数据类型

    JavaScript的八种数据类型

    这篇文章主要分享的是JavaScript的八种数据类型,ES5的时候,我们大家认知的数据类型是?6种的,但是ES6?中新增了一种?Symbol,谷歌67版本中还出现了一种?bigInt,是指安全存储、操作大整数,像下面文章我可没就来看看这八种数据类型的详细介绍吧
    2022-01-01
  • Three.js引用和环境搭建过程详解

    Three.js引用和环境搭建过程详解

    这篇文章主要为大家介绍了Three.js引用和环境搭建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • TypeScript栈的压入与弹出序列校验

    TypeScript栈的压入与弹出序列校验

    这篇文章主要为大家介绍了TypeScript栈的压入与弹出序列校验示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 利用javaScript处理常用事件详解

    利用javaScript处理常用事件详解

    这篇文章主要介绍了利用javaScript处理常用事件详解,文章有非常详细的代码实践,对学习js的小伙伴们有一定的参考价值,需要的朋友可以参考下
    2021-04-04
  • Svelte调试模式js级别差异和细化后的体积差异详解

    Svelte调试模式js级别差异和细化后的体积差异详解

    这篇文章主要为大家介绍了Svelte调试模式js级别差异和细化后的体积差异详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论

?


http://www.vxiaotou.com