promise实现红绿黄三灯交替执行

Myth丶恋晨 2022-12-08 05:29 14阅读 0赞

# 面试过程中让你实现隔一秒执行红黄绿灯的循环 #

看到这个问题，你第一反应我猜你可能会选择直接用定时器实现，代码如下：

--------------------

如果你是一个初学者，你写出这段代码，你可能会觉得你很牛逼，很有成就感，因为功能确实实现了。但当你有点工作经验了你就会发现，卧槽，这代码那个傻逼写的，写的这么挫。确实，这代码耦合性高，改动如果逻辑复杂将会让人非常头疼，代码可读性也非常差，不利于调试，也没有一点函数封装的思想。如果你面试时使用这份答案，面试官肯定会让你优化代码，使用promise如何优化。使用promise你可以写出如下代码:

// 统一封装一个函数
    	function light(fun, timer) { 
            return new Promise((resolve, reject) => { 
                setTimeout(() => { 
                    resolve(fun());
                }, timer);
            });
        }
        // 然后再调用
        function index() { 
            light(red, 1000).then((data) => { 
                return light(green, 1000);
            }).then((data) => { 
                return light(yellow, 1000);
            }).then(() => { 
                index();
            });
        }

--------------------

当你实现了这段代码以后，面试官会觉得你还不错，基本的promise还是会使用的，但他可能有会问你，你有了解过async和await吗，能用async 和await实现这个功能吗？如果你不了解generator函数的话你可能就不会了，async和await其实是它的语法糖，await 后面接的是一个promise返回对象，代码如下

是不是感觉这段代码比上面的可读性好多了，调试也方便，而且await后面的代码必须等他返回执行promise的resolve()才会继续往下执行，让你的代码看起来像同步执行的。  
有兴趣的同学可以关注我一起交流学习，免费给你解答疑问哦。（前提是我能解决的前端问题）