站长图库向大家介绍了Javascript红绿灯,js红绿灯等相关知识,希望对您有所帮助
javascript实现红绿灯的方法：1、使用setTimeout和递归来实现循环改变颜色；2、使用Promise，并把下一次的颜色改变写在then里面；3、使用async await和while实现红绿灯效果。
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();