利用promise写红绿灯

promise是什么？

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

红绿灯的效果就是使用promise的原型的then方法，再加上闭包

红绿灯的效果是： 红灯3秒，黄灯1秒，绿灯2秒

1、首先是html代码

<div id="bigbox"><div class="box" id="redbox"></div><div class="box" id="yellowbox"></div><div class="box" id="greenbox"></div>
</div>

2、 css代码

#bigbox{width: 200px;height: auto;background: black;border-radius: 20px;padding: 10px;
}
.box{width: 160px;height: 160px;margin: 0 auto;margin-top: 10px;border-radius:50%;border: 5px solid gray;background: black;
}

3、 js代码

     <script>var red=document.getElementById('redbox');var yellow=document.getElementById('yellowbox');var green=document.getElementById('greenbox');function changeColor(t){return new Promise((resolve,reject)=>{setTimeout(resolve,t)})}//利用闭包原理循环红绿灯;(function change(){red.style.backgroundColor="red";changeColor(3000).then(()=>{red.style.backgroundColor="black";yellow.style.backgroundColor="yellow";return changeColor(1000)}).then(()=>{yellow.style.backgroundColor="black";green.style.backgroundColor="green";return changeColor(2000)}).then(()=>{green.style.backgroundColor="black";change()})})();</script>

创建一个changeColor方法，返回的是一个promise对象，所以在下面调用changeColor方法是可以用promise的原型方法 then。

4、实现原理

promise对象转化为resolved时，then方法才调用里面的回调函数。

即 changeColor中的定时器在经过规定秒数后，才传递出resolve的状态是否是resolved，then在接收到resolved后才开始执行变色的代码，这样就实现了一个灯亮的时间，有因为then里面return changeColor(1000)，所以又是一个新的promise对象了，可以接着使用then方法。

在最后的then中再调用change()方法，就实现了循环。

利用promise写红绿灯相关推荐

[探索] 利用promise做一个请求锁
在最近开发小程序的过程中,遇到一个需求,就是请求的时候header需要带上accessToken, accessToken是通过登陆接口返回的参数,可能会出现过期的情况,则需要重新登陆,所以每次加载小 ...
利用Flutter写一个跨平台的果核APP（4）——数据存储
前言目前我们已经实现了几个界面,今天这篇文章开始着手进行登录页的制作,主要流程就是获取输入框中的内容,发送给后台进行验证,如果成功将返回信息保存在本地并跳转至首页,如果失败就提示用户重新输入. 在这 ...
SQL语句利用日志写shell
outfile被禁止,或者写入文件被拦截: 在数据库中操作如下:(必须是root权限) show variables like '%general%'; #查看配置 set global genera ...
你会利用css写下拉列表框吗？
看到网上各个网站有各色各样的下拉列表框,你是否有想过自己去做一个出来呢?出于好奇与自强心,我研究了一个下午,发现网上很多的下拉列表框都是利用javascript或者是jquery(其实jquery和j ...
利用apache-commons-fileupload写jsp上传文件
利用apache-commons-fileupload写jsp上传文件需要下载fileupload和beanutils两个包,代码如下. <%@ page language="jav ...
学了C语言，如何利用CURL写一个下载程序？—用nmake编译CURL并安装
在这一系列的前一篇文章学了C语言,如何为下载狂人写一个磁盘剩余容量监控程序?中,我们为下载狂人写了一个程序来监视磁盘的剩余容量,防止下载的东西撑爆了硬盘.可是,这两天,他又抱怨他的下载程序不好用,让我 ...
axios 登录后设置header_axios如何利用promise无痛刷新token
需求最近遇到个需求:前端登录后,后端返回token和token有效时间,当token过期时要求用旧token去获取新的token,前端需要做到无痛刷新token,即请求刷新token时要做到用户无感 ...
利用redis写webshell
redis和mongodb我之所见最近自己在做一些个人的小创作.小项目,其中用到了mongodb和redis,最初可能对这二者没有深入的认识. 都是所谓的"非关系型数据库",有什 ...
利用jquery写的从后台获取json数据以表格显示,并带翻页功能.里面包含模式窗口等功能...
利用jquery写的从后台获取json数据,以表格显示,并带翻页功能里面包含模式窗口等功能大家看例子就懂了下面是效果图: http://www.jm47.com/project/3001.asp ...

利用promise写红绿灯

promise是什么？

1、首先是html代码

2、 css代码

3、 js代码

4、实现原理

利用promise写红绿灯相关推荐

最新文章

热门文章

利用promise写红绿灯

promise是什么？

1、首先是html代码

2、 css代码

3、 js代码

4、 实现原理

利用promise写红绿灯相关推荐

最新文章

热门文章

4、实现原理