| JavaScript, 异步

如何实现让三个灯不断交替重复亮灯

有一道题是：
红灯三秒亮一次，绿灯两秒亮一次，黄灯一秒亮一次；如何让三个灯不断交替重复亮灯？然后就是三个亮灯函数已经存在：

1
2
3
4
5
6
7
8
9
10
// 红灯3s，绿灯2s，黄灯1s
        function red(){
            console.log('red - ',new Date());
        }
        function green(){
            console.log('green - ',new Date());
        }
        function yellow(){
            console.log('yellow - ',new Date());
        }

1. 方法一（callback实现）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 方法一(callback实现)
        function loop(){
            setTimeout(function(){
                red();
                setTimeout(function(){
                    green();
                    setTimeout(function(){
                        yellow();
                        loop();
                    },1000);
                },2000);
            },3000);
        }
        loop();

2. 方法二(Promise实现)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 方法二(Promise实现)
        function tic(timer,callback){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    callback();
                    resolve();
                },timer);
            });
        }
        let promise = new Promise(function(resolve,reject){
            resolve();
        });
        function loop(){
            promise.then(function(){
                return tic(3000,red);
            }).then(function(){
                return tic(2000,green);
            }).then(function(){
                return tic(1000,yellow);
            }).then(function(){
                loop();
            });
        }
        loop();

3. 方法三(Generator实现)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 方法三(Generator实现)
        function tic(timer,callback){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    callback();
                    resolve();
                },timer);
            });
        }
        function * show(){
            yield tic(3000,red);
            yield tic(2000,green);
            yield tic(1000,yellow);
        }
        function loop(iterator,generator){
            let result = iterator.next();
            console.log(result)
            if(result.done){
                loop(generator(),generator);
            }else{
                result.value.then(function(){
                    loop(iterator,generator);
                });
            }
        }
        loop(show(),show);

4. 方法四(async,await)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 方法四(async,await)
function tic(timer,callback){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    callback();
                    resolve();
                },timer);
            });
        }
        (async function(){
            while(true){
                await tic(3000,red);
                await tic(2000,green);
                await tic(1000,yellow);
            }
        })();