javascript如何实现红绿灯

本篇内容介绍了"javascript如何实现红绿灯"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

javascript实现红绿灯的方法：1、使用setTimeout和递归来实现循环改变颜色；2、使用Promise，并把下一次的颜色改变写在then里面；3、使用async await和while实现红绿灯效果。

本教程操作环境：windows7系统、javascript1.8.5版本、Dell G3电脑。

javascript怎么实现红绿灯？

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();

"javascript如何实现红绿灯"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！