Promise实现一个红绿灯

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

需求分析

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

三种颜色进行亮灯
定时时间
循环切换

首先设置一个定时器接收亮灯和亮灯的时间，我们需要用到一个定时器函数接收俩个参数，亮灯颜色和亮灯时间，然后设置一个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()

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

Promise实现一个红绿灯相关推荐

JavaScript Promise解析一个例子就够了
文章目录前言一.Promise构造函数二.一个例子三.总结前言 Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务. 一个例子即可让你逐步运用熟悉 ...
[css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...
[探索] 利用promise做一个请求锁
在最近开发小程序的过程中,遇到一个需求,就是请求的时候header需要带上accessToken, accessToken是通过登陆接口返回的参数,可能会出现过期的情况,则需要重新登陆,所以每次加载小 ...
用html编写一个红绿灯,红绿灯.html
Document body { background-color: yellow; } 红灯 // 需求:点击灯按钮,交通信号灯红 -> 绿 -> 黄 ->红.... /* 思路分 ...
用html编写一个红绿灯,利用js实现简易红绿灯
HTML代码: 在一个div容器内,设置3个span CSS代码: .red_light { width: 200px; height: 200px; border-radius: 50%; marg ...
用html编写一个红绿灯,如何用html+css+javascript写一个简易红绿灯
2 在记事本中复制添加以下内容并保留: 红绿灯 #div1 div{ width:200px; height:200px; background:pink; border:2px solid blue ...
实现一个红绿灯效果，每次红灯亮 10 秒，绿灯亮 8 秒，黄灯亮 3 秒，并在红绿灯右侧显示倒计时
需求说明:当红灯亮的时候,其他灯是黑色,进入 10 秒倒计时:当倒计时结束的时候,绿灯亮,其他灯为黑色,进入 8 秒倒计时:倒计时结束后,黄灯亮,其它灯黑色, 进入三秒倒计时. <style& ...
前端要给力之：红绿灯大战中的火星生命-Promise
目录目录传说的开始看到winter的代码我的第一反应是全无promise的精髓其实我了解Promise也是新近的事情我与Promise后来发生的故事红绿灯大战的亲历实录 Promise写出 ...
实现一个完美符合Promise/A+规范的Promise
原文在我的博客中:原文地址如果文章对您有帮助,您的star是对我最好的鼓励- 简要介绍:Promise允许我们通过链式调用的方式来解决"回调地狱"的问题,特别是在异步过程中,通过 ...

Promise实现一个红绿灯

需求分析

Promise实现一个红绿灯相关推荐

最新文章

热门文章