JS 中使用Promise 实现红绿灯实例代码(demo)
要求
- 使用promise 实现红绿灯颜色的跳转
- 绿灯执行三秒后
- 黄灯执行四秒后
- 红灯执行五秒
html 实现如下：
<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul>
定义一个空类，之后再js中操作对应的类名即可实现相关的效果。
CSS实现如下：
ul {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*画3个圆代表红绿灯*/
ul >li {
width: 40px;
height: 40px;
border-radius:50%;
opacity: 0.2;
display: inline-block;
}
/*执行时改变透明度*/
ul.red >#red,
ul.green >#green,
ul.yellow >#yellow{
opacity: 1.0;
}
/*红绿灯的三个颜色*/
#red {background: red;}
#yellow {background: yellow;}
#green {background: green;}
javascript原理：
promise函数为一个异步操作函数，在函数运行结束时可以使用then()方法。我们再在promise函数内部设置延迟执行即可实现。
js 代码如下：
function timeout(timer){
return function(){
return new Promise(function(resolve,reject){
setTimeout(resolve,timer)
})
}
}
var green = timeout(3000);
var yellow = timeout(4000);
var red = timeout(5000);
var traffic = document.getElementById("traffic");
(function restart(){
'use strict' //严格模式
console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒
traffic.className = 'green';
green()
.then(function(){
console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒
traffic.className = 'yellow';
return yellow();
})
.then(function(){
console.log("红灯"+new Date().getSeconds()) //红灯执行五秒
traffic.className = 'red';
return red();
}).then(function(){
restart()
})
})();
ps:下面看一个Promise用法例子
注意：要想then方法能链式的执行下去，必须返回Promise对象！！！
'use strict';
function async(value) {
return new Promise(function(resolve, reject) {
var ms = Math.round(Math.random() * 1000);
setTimeout(function() {
console.log('waiting ' + ms + 'ms');
// 等待ms毫秒
resolve(value + ms);
}, ms);
});
}
// 每次执行随机等待n毫秒，结果统计总毫秒数
async(0)
.then(async)
.then(async)
.then(async)
.then(async)
.then(function(value) {
console.log('------total wait:' + value + 'ms');
});
////////////////////////////////////////////////////////////
function async1(value) {
return new Promise(function(resolve, reject) {
resolve(value + 1);
});
}
function async2(value) {
// return new Promise(function(resolve, reject) {
// resolve(value + 2);
// });
// 等价与上面写法
return Promise.resolve(value + 2);
}
function async3(value) {
return new Promise(function(resolve, reject) {
resolve(value + 3);
});
}
async1(100).then(async2).then(async3).then(function(value) {
console.log('------' + value);
});
/////////////////////////////////////////////////////////////////
function say() {
var value = 'what';
return Promise.resolve(value);
}
say().then(function(value) {
value = value + ' are';
return Promise.resolve(value);
}).then(function(value) {
value = value + ' you';
return Promise.resolve(value);
}).then(function(value) {
value = value + ' doing';
return Promise.resolve(value);
//return Promise.reject('error, exit'); // 中途退出
}).then(function(value) {
value = value + ' now!';
return Promise.resolve(value);
}).then(function(value) {
console.log('------' + value);
}).catch(function(error) {
console.log('------' + error);
});
<html>
<head>
<title>Ball move</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
}
.ball1 {
background: #ff0000;
}
.ball2 {
background: #00ff00;
}
.ball3 {
background: #0000ff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div class="ball ball1"></div>
<div class="ball ball2"></div>
<div class="ball ball3"></div>
<script type="text/javascript">
function moving(ball, pos) {
return new Promise(function(resolve, reject) {
var marginLeft = parseInt(ball.css('margin-left'));
if (marginLeft != pos) {
var timerId = setInterval(function() {
marginLeft = marginLeft + 1;
ball.css('margin-left', marginLeft);
if (marginLeft == pos) {
clearInterval(timerId);
resolve();
}
}, 20);
} else {
resolve();
}
});
}
moving($('.ball1'), 100).then(function() {
return moving($('.ball2'), 150);
}).then(function() {
return moving($('.ball3'), 200);
});
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的JS 中使用Promise 实现红绿灯实例代码(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JavaScript Promise 用法
同步编程通常来说易于调试和维护,然而,异步编程通常能获得更好的性能和更大的灵活性.异步的最大特点是无需等待."Promises"渐渐成为JavaScript里最重要的一部分,大量的新API都开始promise原理实现.下面让我们看一下什么是promise,以及它的API和用法! Promises现状 XMLHttpRequest API是异步的,但它没有使用promise API.但有很多原生的 javascript API 使用了promise: *Battery API *fetc
-
JavaScript中Promise的使用详解
Promise是ES6中的函数,规范了如何处理异步任务的回调函数,功能类似于jQuery的defferred.简单说就是通过promise对象的不同状态调用不同的回调函数.目前IE8及以下不支持,其他浏览器都支持. promise对象的状态,从Pending转换为Resolved或Rejected之后,这个promise对象的状态就不会再发生任何变化. 使用步骤: var promise = new Promise(function(resolve, reject) { // 异步任务,通过调用
-
浅谈JavaScript中promise的使用
阅读目录 什么是Prmoise Promise的使用 最近在看<你不知道的javascript中卷>,发觉作者花了基本一半的篇幅去讲异步和promise,觉得有必要总结一下. 其实本文的目的是想手写一个Promise的,无奈总结着总结着发觉篇幅有点长,因此只好一分为二,先介绍promise的用法,知道怎么用,我们才知道怎么写,所以把手写一个promise的任务放到了下一篇文章当中. 当然,网上有很多关于promise的文章,都可以参考参考,有误之处,欢迎之处. 什么是Prmoise promi
-
async/await与promise（nodejs中的异步操作问题）
举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa
-
NodeJS的Promise的用法解析
Javascript的特点是异步,Javascript不能等待,如果你实现某件需要等待的事情,你不能停在那里一直等待结果回来,相反,底线是使用回调callback:你定义一个函数,这个函数只有等到结果可用时才能被调用. 这种回调模型对于好的代码组织是没有问题的,但是也可以通过从原始回调切换到promise解决很多问题,将promise看成是一个标准的数据容器,这样会简化你的代码组织,可以成为基于promise的架构. 什么是Promise? 一个promise是一个带有".then()"
-
AngularJS中的Promise详细介绍及实例代码
Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台接数据了,所以决定搞定它. Promise Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写JavaScript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会
-
浅析Javascript ES6中的原生Promise
前言 一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观.而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单. Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔问题的出现.不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解. 举例如下: db.save(data, function(
-
JS 中使用Promise 实现红绿灯实例代码(demo)
要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个
-
JS中定位 position 的使用实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{width:200px;} </style> </head> <body> <div id=&q
-
js中的正则表达式入门(大量实例代码)
什么是正则表达式呢? 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等. 先科普一下基本的知识 js中使用正则表达式,除了了解正则表达式基本的匹配规则外.还需要了解下面的基本的知识: python,js,groovy这些脚本语言都有在线调试的网站,可以在线测试是否有语法错误,用起来也很方便. var reg = new RegExp('\\d{8-20}') reg.
-
JS中实现replaceAll的方法(实例代码)
第一次发现JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/\-/g,"!")则可以全部替换掉匹配的字符(g为全局标志). replace() The replace() method returns the string that results when you replace text matching its first argumen
-
使用jQuery实现两个div中按钮互换位置的实例代码
效果如下 代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /
-
基于Angular.js实现的触摸滑动动画实例代码
先上图: 这个主要用到是angular-touch.js中封装好的ng-swipe-left,ng-swipe-right,向左或向右的触摸事件.结合css3的transition实现的动画.ng-class为切换写好的动画的className. <!DOCTYPE HTML> <html ng-app="myapp"> <head> <meta http-equiv="content-type" content="
-
vue.js加载新的内容(实例代码)
vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&
-
原生 JS Ajax,GET和POST 请求实例代码
javascript/js的ajax的GET请求代码如下所示: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
-
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css 和 js文件不需要过多的解释 在这里要注意的是pages文件夹 这里个文件夹下放的是需要预览的图片文件
-
用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ <span style="white-space:pre"> </span>data: {}, //参数 url: "", //请求地址 //发生错误是调用 error: function(data) { }, //请求成功调用 success: function(data){ <