Promise实现红绿灯

生活中常见的红绿灯利用js实现

主要是利用的promise的异步来实现功能那个。

function change(div){
	return new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve(div);
		},1000)
	})
}

利用promise来实现延迟操作
修改每个灯的颜色：

function changeColor(div,color){
	divs.forEach(item=>{
		item.style.backgroundColor = "#ccc"
	})
	div.style.backgroundColor = color;
}

更改灯的样式时，需要清除之前的灯的样式。

具体实现代码如下：

function lightChange(){
	change(divs[0]).then(data=>{
		changeColor(data,"red");
		return change(divs[1]);
	}).then(data=>{
		changeColor(data,"yellow");
		return change(divs[2]);
	}).then(data=>{
		changeColor(data,"green");
		return change(divs[1]);
	}).then(data=>{
		changeColor(data,"yellow");
		return change(divs[0]);
	}).then(data=>{
		changeColor(data,"red");
		lightChange();
	})
}

使用方法：设置三个div小圆圈，获取这些div列表，修改对应的div，递归执行函数。
重点在于使用了promise里面的异步操作中的返回的promise对象来实现