实现红绿灯代码，红灯2秒，黄灯1秒，绿灯3秒，循环改变颜色.
无聊刷沸点看到这样一条沸点
顿时曾经的面试场景浮现脑海，想必很多人也过这样的手写面试题。曾经面试某公司，让我用react手写这样的效果，脑海中思路也涌现了出来
不就是微任务、宏任务、同步异步去实现么
大概思路知道了，如何写也大概有想法了，然后果断打开Google搜索。果然写法都大差不差人家想法更齐全。
1.使用微任务、宏任务实现
- setTimeout递归实现
function changeColor(color) {
console.log('traffic-light ', color);
}
function main() {
changeColor('red');
setTimeout(()=>{
changeColor('yellow');
setTimeout(() => {
changeColor('green');
setTimeout(main, 2000);
}, 1000);
}, 2000);
}
main();
- promise递归实现
function sleep(duration){
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
function changeColor(duration,color){
return new Promise(resolve => {
console.log('traffic-light ', color);
sleep(duration).then(resolve);
})
}
function main() {
return new Promise(resolve => {
changeColor(2000, 'red').then(() => {
changeColor(1000, 'yellow').then(() => {
changeColor(3000, 'green').then(() => {
main();
})
})
})
})
}
main();
- async await 实现
function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log('traffic-light ', color);
await sleep(duration);
}
async function main() {
while (true) {
await changeColor('red', 2000);
await changeColor('yellow', 1000);
await changeColor('green', 3000);
}
}
main();
此时我也看到作者和这个博主代码async await代码一样，看到大家都是优秀的coder!
就是这几个方法，想必正常来说大家想到的都是这样的方法，当我自认为对这道题认知差不多的时候，再次看评论区时，我为我的鲁莽抱歉。大神的[^骚操作]总是让人眼前一亮。
2.animation动画实现
#myDIV
{
width:200px;
height:200px;
background:red;
border-radius:50%;
animation:myAnimation 6s infinite;
}
@keyframes myAnimation
{
0%{background-color:green;}
49.99999%{background-color:green;}
50% {background-color:yellow;}
66.66667% {background-color:yellow;}
66.66668% {background-color:red;}
}
此时此刻我只想用一张图片来形容
这真不乏是一个好方法，果然高手在评论区。
3.数组循环
我第一想法是通过异步方法实现，看了评论区后想可不可以不用异步呢？看一下题，想了想，写下了几行代码
let dom = document.querySelector("#app");
let color = ['green','green','green','yellow','red','red'];
let i = 0;
function change(i){
dom.style.background = `${color[i]}`
}
setInterval(function(){
if(color[i-1]!=color[i]){
change(i)
}
i = (i == color.length-1 ? 0 : i+=1)
},1000)
虽说实现了，但是也存在问题，这里直接引用作者的话
这题要考的内容是宏任务和微任务的机制，你对比一下我的代码和你的代码，那边代码可读性更好，你这个代码可读性较差。如果我题目有改动成253253循环，这种你怎么判断
就这样完成了一次有效的摸鱼，也学会了大神的骚操作！技术指数一般，简单记录下！
