用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 ...
随机推荐
- winserver2012 自启动软件
开始->运行->输入shell:startup 在打开的启动文件夹中,将需要启动程序的快捷方式复制进去,完工 重启试试吧
- vue.js是什么
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习, ...
- 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一）
最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入
- Fedora Server 21下OpenJdk和Oracle Jdk共存
最新文章:Virson's Blog 参考文章:博客园-三维蚂蚁 Linux公社 1.首先需要下载对应平台的Jdk:Oracle 官网 2.使用yum或rpm命令安装Jdk: yum install ...
- wpf 模板选择器DataTemplateSelector及动态绑定，DataTemplate.Triggers触发器的使用
通常,如果有多个 DataTemplate 可用于同一类型的对象,并且您希望根据每个数据对象的属性提供自己的逻辑来选择要应用的 DataTemplate,则应创建 DataTemplateSelect ...
- net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting head
使用docker 拉镜像的时候,出现下面的错误: net/http: request canceled while waiting for connection (Client.Timeout exc ...
- 使用Sublime Text搭建python调试环境[转]
pycharmt等IDE虽然用着爽,但毕竟在速度.资源上还是比较让人不爽的. 使用IDE无非是图个方便省事,特别是像我这种有些记性差的来说. IDE说起来方便于的几个地方就是: 1.语法颜色高亮 2. ...
- ethereum发erc20token
以太坊发币智能合约代码简单介绍: 发币代码如下(https://ethereum.org/token#the-code网站中获得): pragma solidity ^; interface toke ...
- 【代码审计】YzmCMS_PHP_v3.6 CSRF漏洞分析
0x00 环境准备 YzmCMS官网:http://www.yzmcms.com/ 程序源码下载:http://pan.baidu.com/s/1pKA4u99 测试网站首页: 0x01 代码分析 ...
- 系统信号（signal）与其他（定时器，退出清理等）
信号signal,可以用作进程线程通信,也可以用作接收中断后退出,退出时,清理资源,记录日志.python相关包为signa. linux信号表 root@server:~# kill -l ) SI ...