題目：紅燈三秒亮一次念赶，綠燈兩秒亮一次础钠，黃燈一秒亮一次；如何讓三個燈不斷交替重復亮燈叉谜？三個亮燈函數(shù)已經(jīng)存在：
function red(){
console.log('red - ', new Date());
}
function green(){
console.log('green - ', new Date());
}
function yellow(){
console.log('yellow - ', new Date());
}
1. callback實現(xiàn)
function loop(){
setTimeout(function(){
red();
setTimeout(function(){
green();
setTimeout(function(){
yellow();
loop();
}, 1000)
}, 2000)
}, 3000);
}
loop();
2. Promise實現(xiàn)
返回Promise對象的通用亮燈函數(shù)
function tic(timer, callback){
return new Promise(function(resolve, reject){
setTimeout(function(){
callback();
resolve();
}, timer)
})
}
var 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實現(xiàn)
function* light(){
yield tic(3000, red);
yield tic(2000, green);
yield tic(1000, yellow);
}
function loop(iterator, gen){
var result = iterator.next();
if (result.done) {
loop(gen(), gen)
} else {
result.value.then(function(){
loop(iterator, gen)
})
}
};
loop(light(), light);
4. async, await實現(xiàn)
(async function (){
while(true){
await tic(3000, red);
await tic(2000, green);
await tic(1000, yellow);
}
})();
5. 改進版的可擴展callback實現(xiàn)
function light(func, timer){
return function(callback){
setTimeout(function(){
func();
callback();
}, timer)
};
}
function queue(funcs){
(function next(){
if (funcs.length > 0){
var f = funcs.shift();
f(next)
}
})();
}
function loop(){
queue([
light(red, 3000),
light(green, 2000),
light(yellow, 1000),
loop
])
}
loop();
總結
- 最簡單的callback實現(xiàn)旗吁，當有更多個函數(shù)時，會導致回調(diào)地獄停局，代碼慘不忍睹很钓，但經(jīng)過封裝后，也可進行方便的擴展董栽。
- Promise實現(xiàn)中規(guī)中矩
- Generator實現(xiàn)中包含了一個通用的Generator順序執(zhí)行函數(shù)
- 最愛async, await實現(xiàn)
