用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 ...
随机推荐
- segMatch:基于3D点云分割的回环检测
该论文的地址是:https://arxiv.org/pdf/1609.07720.pdf segmatch是一个提供车辆的回环检测的技术,使用提取和匹配分割的三维激光点云技术.分割的例子可以在下面的图 ...
- Java知多少（27）继承的概念与实现
继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法和属性的过程.如果类B继承于类A,那么B就拥有A的方法和属性. ...
- 实时折射、镜面反射shader
原文链接:http://www.ceeger.com/forum/read.php?tid=3162&fid=2 Unity没有原生的实时镜面反射Shader,分享几个自己写的,希望能抛砖引玉 ...
- linux 设置中文版man手册
作为CentOS 新手,看懂英文man固然重要,不过配置好中文man也可以让自己更快速地学习!1. 下载中文man包源码的网址:https://src.fedoraproject.org/repo/p ...
- [hadoop] hadoop 运行 wordcount
讲准备好的文本文件放到hdfs中 执行 hadoop 安装包中的例子 [root@hadoop01 mapreduce]# hadoop jar hadoop-mapreduce-examples-2 ...
- [Artoolkit] kpmMatching & Tracking of nftSimple
1. kpmMatching thread main() --> loadNFTData() --> trackingInitInit() --> In static void *t ...
- python 爬虫练习
bs去除特定标签. # url import easygui as g import urllib.request from bs4 import BeautifulSoup import os im ...
- OpenGL——旋转的六边形（动画）
代码: #include<iostream> #include <math.h> #include<Windows.h> #include <GL/glut. ...
- Linux内核 GPIO操作部分API
内核中关于GPIO的操作API主要集中在<linux/of_gpio.h>和<linux/gpio.h>中,前者主要是GPIO直接与设备树相关的操作,在Linux 设备树操作A ...
- nginx负载均衡(反向代理)
6,安装nginx 6.1 依赖库安装 要安装在root根目录里,不要装在虚拟环境里面 yum install gcc-c++ pcre pcre-devel zlib zlib-devel ope ...