Promise 配合async await 做的红绿灯闪烁

桃扇骨 2022-02-26 13:06 182阅读 0赞

![20190329211528830.png][]![20190329211551555.png][]![20190329211650457.png][]

直接上代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #light{
                /* background:red; */
                width:50px;
                height:50px;
                border-radius:50%;
                border:1px solid #000;
                }
        </style>
    </head>
    <body>
        <div id="light"></div>
        <script>
            function sleep(duration) {
                return new Promise(function(resolve, reject) {
                    setTimeout(resolve,duration);
                })
            }
            // 接收延迟时间和颜色
            async function changeLightColor(duration, color){
                document.getElementById('light').style.background = color
                console.log('color', color)
                await sleep(duration)
            }
            async function act() {  // 一直循环
                while (true) {
                    await changeLightColor(3000, 'red');
                    await changeLightColor(2000, 'green');
                    await changeLightColor(1000, 'yellow');
                }
            }
            act()
    
        </script>
    </body>
    </html>

[20190329211528830.png]: https://img-blog.csdnimg.cn/20190329211528830.png
[20190329211551555.png]: https://img-blog.csdnimg.cn/20190329211551555.png
[20190329211650457.png]: /images/20220226/e252d93863d04c229609d14d6c310bfc.png

发表评论取消回复

表情：

评论列表（有 0 条评论，182人围观）

还没有评论，来说两句吧...

相关阅读

相关 async ，await，promise 的使用

async+await 就相当于 promise then的一个语法糖，主要是解决then.then这样的回调嵌套语法糖：同样的代码效果，只用了更好的写法用法，也更用于理

清疚/ 2022年12月28日 09:29/ 0 赞/ 177 阅读

相关 promise 和 async await区别

什么是Async/Await? 　　async/await是写异步代码的新方式，以前的方法有回调函数和Promise。　　async/await是基于Promise实

谁践踏了优雅/ 2022年12月27日 01:48/ 0 赞/ 172 阅读

相关 promise async await

1.当异步函数嵌套到别的函数内后,需要循环使用async和await 否则就会变成异步 async getEventList () { const

亦凉/ 2022年10月30日 05:19/ 0 赞/ 173 阅读

相关 Promise 的 async 与 await

一、async 与 await 1. `async` 函数，如下所示：函数的返回值为 `promise` 对象 `promise` 对象的结果由 `as

我会带着你远行/ 2022年08月29日 00:28/ 0 赞/ 170 阅读

相关 Promise，Async，await简介

Promise 对象转载：http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生

缺乏、安全感/ 2022年04月11日 02:12/ 0 赞/ 217 阅读

相关 Promise 配合async await 做的红绿灯闪烁

![20190329211528830.png][]![20190329211551555.png][]![20190329211650457.png][] 直接

桃扇骨/ 2022年02月26日 13:06/ 0 赞/ 183 阅读

相关 async/await 和 promise

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

港控/mmm°/ 2022年02月15日 07:19/ 0 赞/ 304 阅读

相关回调、Promise、async-await

第一章异步：现在与将来程序中现在运行的部分和将来运行的部分之间的关系就是异步编程的核心。场景：等待用户输入、从数据库或文件系统中请求数据、通过网络发送数据并等待响应

小咪咪/ 2021年12月17日 02:13/ 0 赞/ 315 阅读

相关 Promise和async/await

这篇先讲Promise和async/await使用，下一篇讲在事件循环中Promise和async/await执行顺序 1.先看一段代码先看一段代码，对Promise和a

一时失言乱红尘/ 2021年10月24日 02:24/ 0 赞/ 421 阅读

相关 promise 和 async await区别

什么是Async/Await? 　　async/await是写异步代码的新方式，以前的方法有回调函数和Promise。　　async/await是基于Promise实现

蔚落/ 2021年07月24日 19:21/ 0 赞/ 494 阅读