2021-01-02

dewey-zhou

于 2021-01-02 10:57:23 发布

阅读量85

点赞数

分类专栏： Dewey前端异步文章标签： js

本文链接：https://blog.csdn.net/weixin_42971584/article/details/112094075

版权

Dewey前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

异步

1 篇文章 0 订阅

订阅专栏

异步（实现红绿灯）

三种方式：callback，Promise，async/await

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
            background-color: gray;
            display: inline-block;
            margin: 30;
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        .green.light{
            background-color: green;
        }
        .yellow.light{
            background-color: yellow;
        }
        .red.light{
            background-color: red;
        }
    </style>
   <div class="green"></div>
   <div class="yellow"></div>
   <div class="red"></div>
<button id="next">
    next
</button>   
 <script>
        function green(){
            let lights = document.getElementsByTagName("div")
            for (var i =0;i<3;i++){
                lights[i].classList.remove("light")
            }
            document.getElementsByClassName("green")[0].classList.add('light')
        }
        function yellow(){
            let lights = document.getElementsByTagName("div")
            for (var i =0;i<3;i++){
                lights[i].classList.remove("light")
            }
            document.getElementsByClassName("yellow")[0].classList.add('light')
        }
        function red(){
            let lights = document.getElementsByTagName("div")
            for (var i =0;i<3;i++){
                lights[i].classList.remove("light")
            }
            document.getElementsByClassName("red")[0].classList.add('light')
        }
        // 回调方式
        // function start(){
        //     green()
        //     setTimeout(function(){
        //         yellow()
        //         setTimeout(function(){
        //             red()
        //             setTimeout(function(){start()},5000)
        //         },2000)
        //     },10000)
        // }
        // 
        
        function sleep(t){
            return new Promise((resolve,reject)=>{
                setTimeout(resolve,t)
            })
        }
        // Promise方式
        // function start(){
        //     green()
        //     sleep(10000)
        //     .then(()=>{
        //         yellow()
        //         return sleep(2000)
        //     })
        //     .then(()=>{
        //         red()
        //         return sleep(5000)
        //     }).then(start)
        // }
        // async方式
        function happen(element,eventName){
            return new Promise((res,rej)=>{
                element.addEventListener(eventName,res,{once:true})
            })
        }
        async function start(){
            while(true){
                green()
                await happen(document.getElementById("next"),'click')
                yellow()
                await happen(document.getElementById("next"),'click')
                red()
                await happen(document.getElementById("next"),'click')
            }
        }

        start()
    </script>
</body>
</html>