利用 Promise 實現(xiàn)一個元素先 紅色兩秒 黃色一秒 綠色三秒，不斷循環(huán)。
html+css代碼如下
#box {
width: 50px;
height: 50px;
background-color: black;
border-radius: 50%;
}
<div id="box"></div>
利用setTimeout屬性缘回，經(jīng)過不同時間調(diào)用函數(shù)
js代碼如下：
let td = document.getElementById('box');
function red() {
return new Promise((resolve, reject) => {
box.style.backgroundColor = 'red';
// 利用setTimeout特性調(diào)用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
