JS 中使用Promise 实现红绿灯实例代码(demo)


Posted in Javascript onOctober 20, 2017

要求

  • 使用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()
  })
  })();

Demo 请 点击这里!

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 相关文章推荐
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
JS实现打字游戏
Dec 17 Javascript
JS如何生成随机验证码
Mar 02 Javascript
jQuery实现视频展示效果
May 30 jQuery
用JavaScript做简易的购物车的代码示例
Oct 20 #Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 #Javascript
phantomjs导出html到pdf的方法总结
Oct 19 #Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 #Javascript
vue resource post请求时遇到的坑
Oct 19 #Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 #Javascript
JavaScript适配器模式详解
Oct 19 #Javascript
You might like
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
js用类封装pop弹窗组件
2017/10/08 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python中的日期时间处理详解
2016/11/17 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python hook监听事件详解
2018/10/25 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
python实现图书借阅系统
2019/02/20 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
专升本自我鉴定
2013/10/10 职场文书
户外婚礼策划方案
2014/02/08 职场文书
领导党性分析材料
2014/02/15 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis