红绿灯 promise和原始方式实现

最新推荐文章于 2024-10-08 14:06:46 发布

weixin_33924312

最新推荐文章于 2024-10-08 14:06:46 发布

阅读量378

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moli-/p/11124298.html

本文通过实现一个交通灯颜色切换的功能，对比了使用Promise结合async/await与传统定时器回调的方式。展示了现代JavaScript特性如何简化异步代码，提高可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise 方式 async+await

function sleep(duration){
    return new Promise(function(resolve){
        setTimeout(resolve, duration);
    })
}
async function changeColor(duration,color){
    document.getElementById("traffic-light").style.background = color;
    await sleep(duration);

}
async function main(){
    while(true){
        await changeColor(3000,"green");
        await changeColor(1000, "yellow");
        await changeColor(2000, "red");
    }
}
main()

原始方式

function color () { 
   console.log('green');

   setTimeout(() => {
      console.log('yellow');

      setTimeout(() => {
         console.log('red');

         setTimeout(color, 2000);
      }, 1000)
   }, 3000);
}
color();

转载于:https://www.cnblogs.com/moli-/p/11124298.html