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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
用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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
运动会方阵口号
2014/06/07 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年纪委工作总结
2014/12/05 职场文书
技术员岗位职责
2015/02/04 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
电话营销开场白
2015/05/29 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP