我是靠谱客的博主 端庄哈密瓜,这篇文章主要介绍javascript怎么实现红绿灯,现在分享给大家,希望可以做个参考。

本教程操作环境: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基础教程》

以上就是javascript怎么实现红绿灯的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是端庄哈密瓜最近收集整理的关于javascript怎么实现红绿灯的全部内容,更多相关javascript怎么实现红绿灯内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(78)

评论列表共有 0 条评论

立即
投稿
返回
顶部