Promise实现红绿灯颜色切换动画
19 浏览量
更新于2024-08-31
收藏 48KB PDF 举报
"JS 中使用Promise 实现红绿灯实例代码(demo)"
在这个示例中,我们将讨论如何使用JavaScript的Promise对象来实现一个简单的红绿灯模拟。Promise是JavaScript中处理异步操作的一种机制,它允许我们以链式调用的方式管理多个异步任务,避免了回调地狱的问题。
首先,HTML部分创建了一个无序列表`<ul>`,其中包含三个`<li>`元素,分别代表红、黄、绿三种颜色的灯。每个灯都有相应的ID,便于在JavaScript中选中并操作。
CSS部分则设置了红绿灯的基本样式,包括位置定位、大小、圆角以及初始的透明度。当某个灯被激活时,通过改变其透明度来显示灯的颜色。
JavaScript部分是实现红绿灯功能的关键。这里定义了一个名为`timeout`的函数,它返回一个新的Promise,该Promise在指定的时间(以毫秒计)后解析。这样,我们可以用这个函数来模拟每种灯亮起的持续时间。
接着,我们创建了三个变量`green`、`yellow`和`red`,分别表示绿灯、黄灯和红灯的延迟时间。例如,`green`代表绿灯亮3秒。
为了实现灯的切换,我们使用了一个立即执行的函数表达式(IIFE),在其中定义了`restart`函数。这个函数首先打印当前的秒数,然后通过修改`traffic`元素的类名来切换灯的状态。`use strict`语句用于开启严格模式,确保代码的健壮性。
在`restart`函数中,首先将绿灯的类添加到`traffic`元素上,然后等待绿灯的Promise解析(即等待3秒)。一旦绿灯的Promise解析,黄灯的Promise开始执行,等待4秒后解析。同样的过程,黄灯之后是红灯,红灯等待5秒后解析。整个流程形成一个循环,模拟了红绿灯的交替。
这个实例展示了如何使用Promise结合定时器(`setTimeout`)来管理异步流程,使得代码更加清晰和易于理解。通过Promise的链式调用,我们可以方便地控制红绿灯的顺序和间隔时间,这是现代JavaScript异步编程的一个重要实践。
2021-01-18 上传
2023-04-21 上传
2023-05-31 上传
2021-01-21 上传
2020-10-17 上传
2021-07-14 上传
weixin_38620314
- 粉丝: 1
- 资源: 913
最新资源
- SSM动力电池数据管理系统源码及数据库详解
- R语言桑基图绘制与SCI图输入文件代码分析
- Linux下Sakagari Hurricane翻译工作:cpktools的使用教程
- prettybench: 让 Go 基准测试结果更易读
- Python官方文档查询库,提升开发效率与时间节约
- 基于Django的Python就业系统毕设源码
- 高并发下的SpringBoot与Nginx+Redis会话共享解决方案
- 构建问答游戏:Node.js与Express.js实战教程
- MATLAB在旅行商问题中的应用与优化方法研究
- OMAPL138 DSP平台UPP接口编程实践
- 杰克逊维尔非营利地基工程的VMS项目介绍
- 宠物猫企业网站模板PHP源码下载
- 52简易计算器源码解析与下载指南
- 探索Node.js v6.2.1 - 事件驱动的高性能Web服务器环境
- 找回WinSCP密码的神器:winscppasswd工具介绍
- xctools:解析Xcode命令行工具输出的Ruby库