用promise和async/await分别实现红绿灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>练习</title> </head>
<style>
.light{
width:200px;
height: 200px;
border-radius:50%;
background:red;
}
.light2{
width:200px;
height: 200px;
border-radius:50%;
background:red;
}
</style>
<body>
<div class="light"></div>
<div class="light2"></div>
<script>
//promise实现 红绿灯
var light=document.getElementsByClassName("light")[0];
var r=function(){
return new Promise(function(resolve,reject){
light.style.background="red";
setTimeout(resolve,3000);
})
};
var y=function(){
return new Promise(function(resolve,reject){
light.style.background="yellow";
setTimeout(resolve,2000);
})
}
var g=function(){
return new Promise(function(resolve,reject){
light.style.background="green";
setTimeout(resolve,4000);
})
}
var xun=function(){
r().then(function(){
return y();
}).then(function(){
return g();
}).then(function(){
return xun();
});
}
xun(); //async/await实现红绿灯
const lignt2=document.getElementsByClassName("light2")[0];
function changeLightColor(color,duration){
return new Promise(function(resolve,reject){
lignt2.style.background=color;
setTimeout(resolve,duration);
})
} async function xun2 (){
await changeLightColor("red",3000);
await changeLightColor("yellow",2000);
await changeLightColor("green",4000);
xun2();
}
xun2();//执行
</script>
</body>
</html>
用promise和async/await分别实现红绿灯的更多相关文章
- node.js异步控制流程 回调，事件，promise和async/await
写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...
- Promise, Generator, async/await的渐进理解
作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...
- 异步操作之 Promise 和 Async await 用法进阶
ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
- callback vs async.js vs promise vs async / await
需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...
- Callback, Promise和Async/Await的对比
Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- “setTimeout、Promise、Async/Await 的区别”题目解析和扩展
解答这个题目之前,先回顾下JavaScript的事件循环(Event Loop). JavaScript的事件循环 事件循环(Event Loop):同步和异步任务分别进入不同的执行"场所& ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
随机推荐
- 【iCore4 双核心板_FPGA】例程十一：FSMC总线通信实验——独立地址模式
实验原理: STM32F767上自带FMC控制器,本实验将通过FMC总线的地址独立模式实现STM32与FPGA 之间通信,FPGA内部建立RAM块,FPGA桥接STM32和RAM块,本实验通过FSMC ...
- centos 6.4 使用epel 源
EPEL是RHEL 的 Fedora 软件仓库,把它添上,你就可以获得 RHEL AS 的高质量.高性能.高可靠性,又需要方便易用(关键是免费)的软件包更新功能.EPEL(Extra Packages ...
- WebApi XML,Json格式自定义，IEnumerable<T>，ArrayOf
global.ascx中application-start() GlobalConfiguration.Configuration.Formatters.XmlFormatter.UseXmlSeri ...
- CMS 01
环境搭建 工具 sublime mysql 5.7, 数据库管理 Navicat django 1.10, django shell (可以用来检查错误) 操作系统, windows 7 搭建 dja ...
- EventBus vs Otto vs Guava--自定义消息总线
同步发表于http://avenwu.net/ioc/2015/01/29/custom_eventbus Fork on github https://github.com/avenwu/suppo ...
- python中的生成器函数是如何工作的？
以下内容基于python3.4 1. python中的普通函数是怎么运行的? 当一个python函数在执行时,它会在相应的python栈帧上运行,栈帧表示程序运行时函数调用栈中的某一帧.想要获得某个函 ...
- Linux部署Web应用程序超链接下载中文名称文件404问题解决办法
Web应用程序目录下有帮助文档,是中文名称的Word文件 超链接内容如下: <a href="jsp/plugin/用户手册.doc">用户手册</a> 开 ...
- Ubuntu下安装hbase
1.在清华镜像站点下载hbase的安装文件,选择的是stable的版本,版本号是hbase-1.2.5/ 2.解压放在/usr/local的目录下 3.修改权限 sudo chown -R hduse ...
- 设计模式-行为型模式，python访问者模式
访问者模式 在访问者模式(Visitor Pattern)中,我们使用了一个访问者类,它改变了元素类的执行算法.通过这种方式,元素的执行算法可以随着访问者改变而改变.这种类型的设计模式属于行为型模式. ...
- fs项目---->cron框架的学习（一）
Cron是一种允许您按计划执行某些内容的工具.这通常使用cron语法来完成.我们允许您在计划作业触发时执行函数.我们还允许您使用子进程执行javascript进程外部的作业.此外,这个库超出了基本的c ...