JavaScript 實現紅綠燈

  使用setTimeout、Promise、async await 三種方式實現紅綠燈代碼，紅燈2秒，黃燈1秒，綠燈3秒，循環改變顏色。改變顏色的方法，就簡單寫成打印出顏色。

setTimeout實現

  使用setTimeout是最基本的實現方式，代碼如下，使用遞歸來實現循環改變顏色。

function changeColor(color) {
	console.log('traffic-light ', color);
}
function main() {
	changeColor('red');
	setTimeout(()=>{
		changeColor('yellow');
		setTimeout(() => {
			changeColor('green');
			setTimeout(main, 2000);
		}, 1000);
	}, 2000);
}
main();

Promise 實現

  使用Promise，把下一次的顏色改變寫在then裏面，最後同樣使用遞歸完成循環。

function sleep(duration){
    return new Promise(resolve => {
        setTimeout(resolve, duration);
    })
}
function changeColor(duration,color){
    return new Promise(resolve => {
		console.log('traffic-light ', color);
    	sleep(duration).then(resolve);
	})
}
function main() {
	return new Promise(resolve => {
		changeColor(2000, 'red').then(() => {
			changeColor(1000, 'yellow').then(() => {
				changeColor(3000, 'green').then(() => {
					main();
				})
			})
		})
	})
}
main();

async await 實現

  使用async await就可以避免Promise的一連串.then.then.then，也不再需要遞歸，使用while就可以實現循環。

function sleep(duration) {
	return new Promise(resolve => {
		setTimeout(resolve, duration);
	})
}
async function changeColor(color, duration) {
	console.log('traffic-light ', color);
	await sleep(duration);
}
async function main() {
	while (true) {
		await changeColor('red', 2000);
		await changeColor('yellow', 1000);
		await changeColor('green', 3000);
	}
}
main();