Promise实现红绿灯颜色切换动画

"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异步编程的一个重要实践。