利用 Promise 实现一个元素先 红色两秒 黄色一秒 绿色三秒，不断循环。
html+css代码如下
#box {
width: 50px;
height: 50px;
background-color: black;
border-radius: 50%;
}
<div id="box"></div>
利用setTimeout属性，经过不同时间调用函数
js代码如下：
let td = document.getElementById('box');
function red() {
return new Promise((resolve, reject) => {
box.style.backgroundColor = 'red';
// 利用setTimeout特性调用green()
setTimeout(() => {
resolve(yellow());
}, 2000);
});
}
function yellow() {
return new Promise((resolve, reject) => {
box.style.backgroundColor = 'yellow';
setTimeout(() => {
resolve(green());
}, 1000);
});
}
function green() {
return new Promise((resolve, reject) => {
box.style.backgroundColor = 'green';
setTimeout(() => {
resolve(red());
}, 1000);
});
}
red();
效果图：
红绿灯.gif
