一次前端面试编程题

模拟红绿灯

模拟红绿灯：红灯3s，绿灯2s，黄灯1s，如此循环

笔者想了一通，简单粗暴，是这样写的：

function lights(){
	console.log('红灯');
	setTimeout(()=>{
		console.log('绿灯');
		setTimeout(()=>{
			console.log('黄灯');
			setTimeout(()=>{
				lights()
			},1000)
		},2000)
	},3000)
}
lights()

后来面试官问我还有没有别的实现方式，比如说Promise。他说我这种方式会丢帧（此处打个问号，下面补充一下为啥会丢帧） 一脸懵逼，不太明白他的意思，下来我仔细想了一下，补充一下。Promise链式调用：

function lights(){
	Promise.resolve()
    .then(()=>{
        return new Promise((res,rej)=>{
        console.log('红灯');
        setTimeout(()=>{
          resolve()
        },3000)
      })
    })
    .then(()=>{
        return new Promise((res,rej)=>{
        console.log('绿灯');
        setTimeout(()=>{
          resolve();
        },2000)
      })
    })
    .then(()=>{
    return new Promise((res,rej)=>{
        console.log('黄灯');
        setTimeout(()=>{
        lights()
      },1000)
    })  
  })
}

最后面试官还说了一种可以 async await的方式，一下方法借鉴了一下网上的 附上链接：www.cnblogs.com/yanjianjian…

class LightFn{
    async run(){
        while(true){
            console.log('this is green 3000');
            await this.sleep(3000);
            console.log('this is yellow 1000');
            await this.sleep(1000);
            console.log('this is red 2000');
            await this.sleep(2000);            
        }    
    }
    sleep(duration){
        return new Promise((resolve, reject)=>{
            setTimeout(resolve ,duration);
        })
    }
}

let a = new LightFn();
a.run();

PS：关于setInterVal的弊端，下来有时间整理学习一下。