说在前面
说实话，刚开始在听到这个面试题的时候，我是诧异的，红绿灯？这不是单片机、FPGA、F28335、PLC的实验吗？！
而且还要用Promise去写，当时我确实没思路，只好硬着头皮去写，下来再review的时候，才真正懂了Promise红绿灯的实现原理
下来我就由浅至深的分析Promise红绿灯的实现原理
下面我就不讲promise的原理和特点了，想具体看了解的可以看阮一峰老师的教程
主要说下红绿灯用到promise最核心的一点就是 “promise实例的状态变为Resolved，就会触发then方法绑定的回调函数”
我是在做这个demo途中才彻底理解了这句话的真正含义。
简单实现
用文字绿灯、黄灯、红灯来模拟表示红绿灯
function timeout(){ return new Promise(function(resolve,reject){ setTimeout(resolve,1000,"绿灯");
} function timeout2(){ return new Promise(function(resolve,reject){ setTimeout(resolve,2000,"黄灯"); }) } function timeout3(){ return new Promise(function(resolve,reject){ setTimeout(resolve,3000,"红灯"); }) } (function restart(){ timeout().then((value)=>{ console.log(value); }) timeout2().then((value)=>{ console.log(value); }) timeout3().then((value)=>{ console.log(value); restart(); }) })()
建立三个promise对象，分别用timeout1 timeout2 timeout3 包起来，promise对象里面含有定时器setTimeout，以连续的1000-》2000-》3000的时间表示每次灯亮的时间的为1秒
下面是实现的demo效果
这种实现有一个问题，如果设定绿灯是5000ms，黄灯是2000ms，红灯是3000ms，
则会出现先显示黄灯，后显示红灯，显示绿灯的同时也会同时显示黄灯，
因为第二轮绿灯的5000ms包含了黄灯的2000ms
这就不符合红绿灯的思想与逻辑
较复杂实现
针对上一个问题，所以有了第二种解决方案
function green(){ return new Promise(function(resolve,reject){ console.log("绿灯"+new Date().getSeconds()) resolve(); }) } function yellow(){ return new Promise(function(resolve,reject){ console.log("黄灯"+new Date().getSeconds()) resolve(); }) } function red(){ return new Promise(function(resolve,reject){ console.log("红灯"+new Date().getSeconds()) resolve(); }) } function ms_5000(){ return new Promise(function(resolve,reject){ setTimeout(resolve,5000) }) } function ms_3000(){ return new Promise(function(resolve,reject){ setTimeout(resolve,3000) }) } function ms_2000(){ return new Promise(function(resolve,reject){ setTimeout(resolve,2000) }) } (function restart(){ green() .then(ms_5000) //绿灯显示5s转红灯 .then(yellow) .then(ms_3000) //黄灯显示3s转红灯 .then(red) .then(ms_2000) //红灯显示2s转绿灯
.then(arguments.callee)
})()
建立三个promise对象 分别用green yellow red 函数包起来，并返回promise对象的resolve，promise对象的状态变成Resolved 也就是说return了reslove就可以可以触发then方法绑定的回调函数
又建立了三个定时器，用于延时，三个定时器中用到了resolve函数，resolve是js引擎自带的函数，也表示promise的状态变成了Resolved，可以触发then方法绑定的回调函数。
实现的demo如下，demo的数字是时间戳，当前的秒数，绿灯55 黄灯0 表示绿灯执行5秒后转到黄灯，下面的同理
但是这样做还是有点麻烦，代码复用率低，要建立3个promise对象，3个定时器，无疑是消耗内存的。
倒数第2行 arguments.callee的含义下面也会解释。
较复杂实现（理理思路）
function green(){ return new Promise(function(resolve,reject){ console.log("绿灯当前秒数"+new Date().getSeconds()) resolve(); }) } (function restart(){ green().then(function(){ return new Promise(function(resolve,reject){ setTimeout(resolve,5000); }) }).then(function(){ return new Promise(function(resolve,reject){ console.log("黄灯当前秒数" + new Date().getSeconds()) resolve(); }) }).then(function(){ return new Promise(function(resolve,reject){ setTimeout(resolve,3000); }) }).then(function(){ return new Promise(function(resolve,reject){ console.log("绿灯当前秒数"+ new Date().getSeconds()) resolve(); }) }).then(function(){ return new Promise(function(resolve,reject){ setTimeout(resolve,2000) }) }).then(arguments.callee); })()
上述的代码功能和第2点相同，只是为了理理思路，体现出promise的状态变成Resolved时，可以触发then方法绑定的回调函数
就像上述代码所示，执行红绿灯的显示，每次都会返回resolve，或者定时器也会使用resolve函数，表示promise的状态确实变成Resolved了。promise有三种状态pending fullfilled rejected ,pending到fulfilled表示的就是Resolved。
demo如下
完美实现（实现架构）
正如上面所说，上述的方法要建立3个promise对象，代码复用率低，那有没有更加严(gao)格(duan)的的方法，答案是有的，但是在看写代码前需要理理思路，分析一下代码的架构如何去写
function green2yellow2red(){ return function(){ // someCode return new Promise(function(){ // someCode }) } } var green = green2red2yellow(setTimeout).bind(null, 3000); var yellow = green2red2yellow(setTimeout).bind(null, 4000); var red = green2red2yellow(setTimeout).bind(null, 5000); (function(){ // IIFE green() })()
上述代码使用一个promise对象，用green2yellow2red函数包起来，有两个return，第一个return是为了给第二个return的promise对象bind延迟时间，bind绑定的参数可以通过arguments访问到，必须是第一个return的函数中的arguments，arguments是什么下面也会讲。
下面打印好多参数，下面我详细解释一下他们的区别
function green2red2yellow(){ console.log(arguments) // [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ] // [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ] // [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(this); // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} return function(){ console.log(arguments) // [3000, callee: ƒ, Symbol(Symbol.iterator): ƒ] console.log(this); // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} console.log(arguments.callee.length) // 形参的个数 console.log(arguments.length) // 实参的个数 var arr = []; var arr2 =[].slice.call(arguments); //把arguments类数组转成真数组 console.log(arguments[0]) //3000 type是Number console.log(arr.push(arguments)) //返回1表示当前代码执行结果为真 console.log(arr); //[Arguments(1)] console.log(arr2) // [3000] type是Array return new Promise(function(){ console.log(arguments) // （2）[ƒ, ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ] // 实参的类数组 }) } } var green = green2red2yellow(setTimeout).bind(null, 3000); var yellow = green2red2yellow(setTimeout).bind(null, 4000); var red = green2red2yellow(setTimeout).bind(null, 5000); (function(){ // IIFE green() })() //测试代码段 var promise = new Promise(function(){ console.log(arguments) // （2）[ƒ, ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ] })
在green2red2yellow函数中直接console.log(arguments)，打印出来三个数组，是因为实例了三次promise对象，分别是green，yellow，red，三次都指向同一个对象，所以打印了三次。
在green2red2yellow函数中的第一个return中console.log(arguments)，只打印在IIFE中执行的的promise对象，就是green对象
在green2red2yellow函数中的第二个return中console.log(arguments)，显示结果前面有一个2表示，实参的个数是2
在测试代码段中测试了一下，确实是。
arguments：以类数组的方式存放着当前对象的实参。green2red2yellow函数中访问是green2red2yellow这个函数对象，green2red2yellow函数中第一个return中访问是return的function bind了参数的的对象，green2red2yellow函数中第二个return是promise对象
arguments.callee：正在执行的这个函数的引用
arguments.callee.length：当前对象形参的个数
arguments.length：当前对象实参的个数
如何把arguments这个类数组转换成数组呢：[ ].slice.call(arguments) 这是最稳妥的方法
下面的使用两种方式把arguments转成数组及两者的区别
var arr = []; var arr2 =[].slice.call(arguments); //把arguments类数组转成真数组 console.log(arguments[0]) //3000 type是Number console.log(arr.push(arguments)) //返回1表示当前代码执行结果为真 console.log(arr); //[Arguments(1)] console.log(arr2) // [3000] type是Array
由此可知 [ ].slice.call(arguments)是最稳妥的方式
完美实现
下面写出我觉得最完美的的实现方式
html：
<ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul>
css：
/*垂直居中*/ ul {position: absolute;width: 200px;height: 200px;top: 50%;left: 50%;transform: translate(-50%,-50%);} /*画3个圆代表红绿灯*/ ul >li {width: 40px;height: 40px;border-radius:50%;opacity: 0.2;display: inline-block;} /*执行时改变透明度*/ ul.red >#red, ul.green >#green,ul.yellow >#yellow{opacity: 1.0;} /*红绿灯的三个颜色*/ #red {background: red;} #yellow {background: yellow;} #green {background: green;}
JS：
function green2red2yellow(timer){ return function(){ var arr = [].slice.apply(arguments) // var self = this; return new Promise(function(resolve,reject){ arr.unshift(resolve) timer.apply(self,arr); }) } }
var green = green2red2yellow(setTimeout).bind(null, 3000); var yellow = green2red2yellow(setTimeout).bind(null, 4000); var red = green2red2yellow(setTimeout).bind(null, 5000); var traffic = document.getElementById("traffic");
(function restart(){ 'use strict' //严格模式 console.log("绿灯"+new Date().getSeconds()) //绿灯执行三秒 traffic.className = 'green'; green() .then(function(){ console.log("黄灯"+new Date().getSeconds()) //黄灯执行四秒 traffic.className = 'yellow'; return yellow(); }) .then(function(){ console.log("红灯"+new Date().getSeconds()) //红灯执行五秒 traffic.className = 'red'; return red(); }).then(function(){ restart() }) })();
1、var arr = [].slice.apply(arguments)
表示把arguments转成数组
2、arr.unshift(resolve)
unshift或shift 在数组首项插入某值或删除首项 push pop 是在数组尾部操作
3、timer.apply(self,arr);
timer是形参，引用了定时器setTimeout，apply是改变this的指向并可以数组的形式传入参数作为
定时器执行的形参，定时器this的指向为self
self就是this就是window，等价于 timer(arr[0],arr[1]);
4、'use strict'
严格模式，在严格模式下 arguments.callee（正在执行的这个函数的引用）无效
5、restart()
递归
6、promise的状态变成Resolved，就会触发then绑定的回调函数，
所以每次then都是return一个promsise对象，因为在promise对象中状态变成了Resolved
下面是实现的demo
注意：立即执行函数的script要写入body里面，否则会显示dom操作获得元素为null，我刚踩到这个坑了...
总结
这个问题的解决让我重新认识了promise，又重新认识了arguments，又重新认识了JS的强大。
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
