JS 中使用Promise 实现红绿灯实例代码(demo)
JavaScript中的红绿灯效果：Promise的魔法
在这个富有创意的小例子中，我们将通过JavaScript的Promise来模拟真实世界中的红绿灯效果。想象一下，一个简单的交通信号灯在你的屏幕上循环切换颜色，这正是我们将要实现的。
让我们了解一下HTML结构和CSS样式。在网页上，我们有一个代表红绿灯的列表项。每个列表项都是一个圆点，代表不同的信号灯颜色。CSS样式为我们提供了基础的视觉效果，使得信号灯在屏幕上以真实的比例呈现。
接下来，进入JavaScript的世界。Promise是一个异步编程的工具，它允许我们以有序的方式处理异步操作。在这个例子中，我们将使用setTimeout函数与Promise结合，模拟信号灯颜色的切换时间。绿灯亮三秒后变为黄灯，黄灯亮四秒后变为红灯，红灯亮五秒后重新开始。这个过程将不断循环。
让我们仔细看看这个JavaScript代码。我们定义了一个名为timeout的函数，它返回一个Promise，该Promise在指定的时间后解决。然后，我们创建了代表红绿灯的变量green、yellow和red，它们分别代表不同的时间延迟。接下来，我们获取代表交通信号灯的DOM元素，并开始循环切换信号灯的颜色。在每个颜色切换后，我们都使用then方法链接下一个操作。这是因为Promise的一个关键特性是其链式调用的能力，这使得我们能够轻松地组织异步代码。当红灯亮起并完成五秒的延迟后，我们再次调用restart函数，开始新一轮的循环。
在这个例子中，Promise不仅仅是一个工具，它更是一种编程思维方式。通过合理地组织异步代码，我们可以实现复杂的逻辑操作，使代码既易于理解又易于维护。在这个红绿灯的小例子中，我们看到了Promise的巨大潜力。想象一下，如果你正在构建一个大型的Web应用程序或网站，合理使用Promise可以使你的代码更加整洁、有条理。
示例一：随机等待时间的Promise链
```javascript
function asyncFunction(initialValue) {
return new Promise((resolve, reject) => {
const randomMs = Math.round(Math.random() 1000);
setTimeout(() => {
console.log(`等待了 ${randomMs} 毫秒`);
resolve(initialValue + randomMs);
}, randomMs);
});
}
// 连续执行多次异步操作，统计总等待时间
asyncFunction(0)
.then(value => asyncFunction(value))
.then(value => asyncFunction(value))
.then(value => asyncFunction(value))
.then(finalValue => console.log(`总计等待时间：${finalValue}毫秒`));
```
示例二：简化并链式调用异步操作
```javascript
function async1(value) { return Promise.resolve(value + 1); }
function async2(value) { return Promise.resolve(value + 2); }
function async3(value) { return Promise.resolve(value + 3); }
async1(100)
.then(async2)
.then(async3)
.then(finalValue => console.log(`最终结果：${finalValue}`));
```
示例三：使用Promise构建流畅的连锁反应
```javascript
function speak() {
let topic = 'what';
return Promise.resolve(topic)
.then(topic => topic + ' are')
.then(topic => topic + ' you')
.then(topic => topic + ' doing')
.then(topic => topic + ' now!')
.then(finalTopic => console.log(finalTopic));
}
speak();
```
HTML示例：球体的移动（使用Promise控制）
```html