JS中如何实现红绿灯效果，办法是什么？
发布时间：2022-02-08 14:24:11 所属栏目：语言 来源：互联网
导读：JS中如何实现红绿灯效果?红绿灯是我们日常很常见的，红绿灯效果就是红灯、黄灯和绿灯循环改延时的效果，那么我们用JavaScript怎样做这样的效果呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 本教程操作环境：win
|
JS中如何实现红绿灯效果?红绿灯是我们日常很常见的，红绿灯效果就是红灯、黄灯和绿灯循环改延时的效果，那么我们用JavaScript怎样做这样的效果呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。 本教程操作环境：windows7系统、javascript1.8.5版本、Dell G3电脑。 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(); （编辑：烟台站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读