Promise实现动态红绿灯切换，让你直观感受Promise的魅力

Promise是一种用于处理异步编程的强大工具，它可以让你以一种更优雅、更易维护的方式编写代码。为了让你直观地感受Promise的魅力，我们将在本文中实现一个动态的红绿灯切换动画。

首先，我们需要创建一个HTML页面，并在其中添加一个<div>元素作为红绿灯的容器。然后，我们需要使用JavaScript来编写Promise函数，并将其与红绿灯的容器元素关联起来。

const redLight = document.getElementById("redLight");
const yellowLight = document.getElementById("yellowLight");
const greenLight = document.getElementById("greenLight");

const toggleLight = (element, color) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      element.style.backgroundColor = color;
      resolve();
    }, 1000);
  });
};

const changeLight = () => {
  toggleLight(redLight, "red")
    .then(() => toggleLight(yellowLight, "yellow"))
    .then(() => toggleLight(greenLight, "green"))
    .then(() => changeLight());
};

changeLight();

在上面的代码中，我们首先定义了三个常量，分别代表红绿灯的三个灯泡元素。然后，我们定义了一个名为toggleLight()的函数，该函数接受两个参数：一个DOM元素和一个颜色。这个函数返回一个Promise，该Promise会在1秒后将DOM元素的背景色设置为指定的颜色。

接下来，我们定义了一个名为changeLight()的函数，该函数使用toggleLight()函数来循环切换红绿灯的颜色。这个函数每隔1秒钟就会调用一次，从而实现动态的红绿灯切换动画。

最后，我们调用changeLight()函数来启动红绿灯的切换动画。

现在，你就可以在浏览器中运行这个HTML页面，并看到动态的红绿灯切换动画了。通过这个例子，你已经直观地感受到了Promise的魅力。Promise可以让你以一种更优雅、更易维护的方式编写异步代码，从而使你的代码更易读、更易维护。