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

2019-11-19 15:07:41

字体：大中小

来源：转载

供稿：网友

要求

使用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)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

下一篇：用JavaScript做简易的购物车的代码示例