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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 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安装攻略:常见问题解答(三)
2006/10/09 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PDO::query讲解
2019/01/29 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
详解Vite的新体验
2021/02/22 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
以windows service方式运行Python程序的方法
2015/06/03 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
实例讲解python中的协程
2018/10/08 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
浅析python中while循环和for循环
2019/11/19 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
初三语文教学计划
2015/01/22 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
暂停营业通知
2015/04/25 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书