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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
Javascript 面向对象特性
Dec 28 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
原生js实现选项卡功能
Mar 08 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
用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
session 的生命周期是多长
2006/10/09 PHP
用PHP调用数据库的存贮过程!
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
JavaScript函数模式详解
2014/11/07 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
深入理解Python变量与常量
2016/06/02 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
欧克利英国官网:Oakley英国
2019/08/24 全球购物
SQL数据库笔试题
2016/03/08 面试题
淘宝活动总结范文
2014/06/26 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
大二学生自我检讨书
2014/10/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
Oracle锁表解决方法的详细记录
2022/06/05 Oracle