<div class="container">
<div class="red"></div>
<div class="green off"></div>
<div class="yellow off"></div>
</div>
let red = document.querySelector('.red'),
green = document.querySelector('.green'),
yellow = document.querySelector('.yellow');
function track(time) {
const p = new Promise((resolve, reject) => {
setTimeout(resolve, time)
})
return p;
}
(function run() {
track(3000).then(function () {
red.className += ' off';
yellow.className = 'yellow';
return track(2000);
}).then(function () {
yellow.className += ' off';
green.className = 'green';
return track(1000);
}).then(function () {
green.className += ' off';
red.className = 'red';
return track(3000);
}).then(function () {
run();
})
})();
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322150506634.gif)