Promise实现一个红绿灯

Promise在ES6中是一个比较常见的东西,它不仅可以用来处理多个接口相互依赖请求,解决地狱回调的问题,还能在很多场景中进行应用,今天我们就以一个Promise实现红绿的的实例来作为对Promise异步作用的学习,同时配合async awiat的使用进行实现

需求分析

首先我们分析以下红绿灯的实现过程需要哪些东西,第一是三个红绿黄三个颜色的灯,然后每个灯之间会进行切换,比如绿灯5s亮然后黄灯亮2s,最后是红灯3s,一个流程过后则是进行一个循环,重新到绿灯亮。

  1. 三种颜色进行亮灯
  2. 定时时间
  3. 循环切换

首先设置一个定时器接收亮灯和亮灯的时间,我们需要用到一个定时器函数接收俩个参数,亮灯颜色和亮灯时间,然后设置一个Promise,由于Promise是一个异步操作,只有发生状态响应的时候,才会继续执行后续的操作,那么我们先在Promise中将颜色打印出来,然后通过一个定时器设置时间延时,延时相当于就是亮灯的时间,因为我们亮灯了,然后延时,就会造成一种灯在这段时间一直亮着的效果

async function timer(color,delay){
    return new Promise((res,rej)=>{
        console.log(color)
        setTimeout(() => {
            res()
        }, delay);
    })
}

从上面操作我们可以看出我们声明了一个异步函数,返回了一个Promise,亮灯后定时进行resolve(),才能进入到下一步骤,所以我们已经完成了亮灯和延时,现在我们对三个颜色的灯配合async await进行三个灯的实现

async function light(){
    await timer('green',1000)
    await timer('yellow',2000)
    await timer('red',3000)
}

我们可以看到现在三个灯是三个独立的异步函数,分步进行执行,由于await返回的也是一个Promise,所以awit的函数必须执行完才能执行下一个函数,这样就是为什么上面会用到定时器调用res()的原因了,只有上一个灯执行完才能进行下一个灯,现在三个灯理论上已经是可以按顺序切换显示的了,最后我们给他进行循环显示

async function light(){
    await timer('green',1000)
    await timer('yellow',2000)
    await timer('red',3000)
    await light()

}
light()

我们在代码块中让切换灯的函数在最后调用自己,这样每一个循环结束都会开始重新调用

  • 6
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值