JS面试异步模拟红绿灯实现详解
更新时间：2023年01月10日 10:24:45 作者：前端兰博
这篇文章主要为大家介绍了JS面试异步模拟红绿灯实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
引言
异步的问题是程序员绕不开的话题，无论在实际开发上还是在面试中，我们总会遇到各种头疼的问题，但是细细品味，其实这些问题总能拓展我们的思路，激发我们的思维能力。培养我们的高情商能力。
（我，我编不下去了）红绿灯模拟在异步问题上是经典中的经典，网络上的设计也是层出不穷，我将给大家呈现一款比较独特的设计。
问题拆解
红绿灯在我们日常生活是常见的，因此对于问题大家是容易理解的，我们此次需要考虑如何模拟红绿灯的无间断切换和轮询过程。
首先分析，我们可以通过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面试异步模拟红绿灯的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了JS前端监控采集用户行为的N种姿势，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了Moment的feature导致线上bug解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了 JavaScript 与 TypeScript之间的联系,JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言。这是一个高级别的、通常是即时编译的、多范式的。TypeScript 是一种强类型、面向对象的编译语言，更多消息内容,需要的朋友可以参考一下下面文章内容2021-11-11
这篇文章主要介绍了微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了利用javaScript处理常用事件详解,文章有非常详细的代码实践,对学习js的小伙伴们有一定的参考价值,需要的朋友可以参考下2021-04-04
这篇文章主要介绍5种 JavaScript 方式实现数组扁平化，虽说只有5种方法，但是核心只有一个就是遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。 想具体了解的小伙伴那请看下面文章内容吧2021-09-09
这篇文章主要为大家介绍了JavaScript 键盘事件的处理及属性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
JavaScript 中for/of,for/in 的详细介绍
这篇文章主要介绍了JavaScript 中的for/of, for/in，在 JavaScript中，for 循环有几种常见的写法，西阿棉文章有写法的详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了微信小程序request出现400的问题解决办法的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下2017-06-06
最新评论