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温习篇 强大的JQuery选择器
Apr 24 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
如何将JavaScript将数组转为树形结构
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
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
php生成验证码函数
2015/10/20 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
json 实例详细说明教程
2009/10/31 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python正则表达式匹配中文用法示例
2017/01/17 Python
python学习入门细节知识点
2018/03/29 Python
Python处理中文标点符号大集合
2018/05/14 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python读取实时数据流示例
2019/12/02 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
Ajax和javascript的区别
2013/07/20 面试题
八一慰问活动方案
2014/02/07 职场文书
应届毕业生求职信
2014/05/26 职场文书
公司经理任命书
2014/06/05 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
罚款通知怎么写
2015/04/22 职场文书
辞职信格式范文
2015/05/13 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
三下乡活动心得体会
2016/01/23 职场文书