用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 双核心板_ARM】例程十七：USB_MSC实验——读/写U盘（大容量存储器）
实验方法: 1.将跳线冒跳至USB_UART,通过Micro USB 线将iCore4 USB-UART接口与电脑相连. 2.打开PUTTY软件. 3.通过读U盘转接线将U盘(或者读卡器)与iCore ...
- javascript 简略
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 记录一次在安装双系统的过程（先有debian, 后加windows 8.1)
突破的难题: 如何在一整个根目录的分区中切出来一半用于安装windows8.1呢? 当初安装debian系统时, 由于脑残,直接把整个500G的硬盘分给了根目录 / ,所以整个磁盘就TMD的一个主 ...
- 第三百九十七节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，主题本地化设置
第三百九十七节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,主题本地化设置 主题设置是在xadmin\plugins\themes.py这个文件 默认xadmin是通过下面这 ...
- Linux软件源
Kali科大软件源: vim /etc/apt/sources.list 下面的粘帖进去. deb http://mirrors.ustc.edu.cn/kali kali main non-free ...
- circRNA 中的ALU 重复元件
circRNA 最初研究的很少,只有很小一部分基因有检测到circRNA, 当时都认为是剪切错误形成的,对于其功能也没人去研究:学者对人类的成纤维细胞进行转录组测序,构建去核糖体文库, 同时采用了RN ...
- shell脚本介绍 shell脚本结构和执行 date命令用法 shell脚本中的变量
- SpringBoot 拦截器(Interceptor)的使用
拦截器intercprot 和 过滤器 Filter 其实作用类似 在最开始接触java 使用struts2的时候,里面都是filter 后来springmvc时就用interceptor 没太在意 ...
- SpringBoot------Maven Install报错
报错信息: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin::compile (default-compil ...
- php info
http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/08/12/1797753.html php pdo 相关 http://blog.cs ...