说在前面
说实话，刚开始在听到这个面试题的时候，我是诧异的，红绿灯？这不是单片机、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的强大。