用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 ...
随机推荐
- Win10共享打印机所需要的设置（无需密码访问实现打印机共享,共享不要密码）
原文:https://m.baidu.com/from=1086k/bd_page_type=1/ssid=0/uid=0/pu=usm@0,sz@1320_1002,ta@iphone_2_5.1_ ...
- Image Lazy Load：那些延时加载图片的开源插件(jQuery)
图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. ...
- 【转】燃烧吧，TestMice!
...当我们几个人碰面的时候,就感觉应该做点测试业内的实事. 记得当时的17站出了一些QTP辅件,给了我一些灵感.2008年做了一整年的QTP企业级实施,从方案到最后的收尾支持,得到最大的教训就是,当 ...
- 关于Unity中的Mesh Collider碰撞器
原来我的场景中有一个平面Plane带Mesh Collider碰撞器组件,一个主角Hero带有一个Box Collider碰撞器和有重力的Rigidbody刚体组件,主角可以放在平面上. 在导入场景后 ...
- Python匿名函数——lambda表达式
如果要定义的函数很简单,一个return语句就能搞定,可以使用lambda表达式来定义, lambda表达式的语法如下: lambda parameters: expression lambda表达式 ...
- Spark学习笔记——手写数字识别
import org.apache.spark.ml.classification.RandomForestClassifier import org.apache.spark.ml.regressi ...
- plsql与64位的Oracle关联方法
在这里吐槽一下,plsql居然木有64位的,以前居然不知道,好久没用Oracle了,想练习一下,方法如下: 1.安装Oracle,官网都有,这里不细说了,我选的是64的Oracle安装的. 2.下载p ...
- 使用Profile和Resources Filter隔离测试环境
转自:http://juvenshun.iteye.com/blog/206825 Maven能够帮我们很好的管理测试,我们可以在 src/test/java 和 src/test/resources ...
- [JS] Topic - Object.create vs new
故事背景 Ref: 你不知道的javascript之Object.create 和new区别 var Base = function () {} (1) var o1 = new Base(); (2 ...
- iOS Xcode, 解决“Could not insert new outlet connection”的问题。
在Xcode中,我们能够在StoryBoard编辑界面或者是xib编辑界面中通过"Control键+拖拽"的方式将某个界面元素和相应的代码文件连接起来,在代码文件里创建outlet ...