场景题:实现一下现实生活中的红绿灯(红 绿 黄 红 绿 . . . )前言 正文 实现效果: 定义函数timePromi
前言
现实生活中的红绿灯就是红灯、绿灯、黄灯之间不停的切换,这个时候可能就会想到定时器,将定时器嵌套,设置相应的时间,那么接下来我们用代码去实现吧~
正文
定义三个函数,来实现红灯、绿灯、黄灯
function red() {
console.log('红灯');
}
function green() {
console.log('绿灯');
}
function yellow() {
console.log('黄灯');
}
定义函数run,里面实现红灯、绿灯、黄灯的切换,通过定时器套定时器,并在最后一个定时器内进行自身函数的调用,也就是递归
function run() {
red();
setTimeout(() => {
green();
setTimeout(() => {
yellow();
setTimeout(() => {
run();
}, 2000);
}, 2000)
}, 3000);
}
执行函数run
run();
实现效果:
还有一种方法,就是通过promise + async来实现
- 定义函数timePromise来返回个promise,promise里设置一个time的定时器,time后resolve,也就是返回的promise的状态由pending编程fulfilled
function timePromise(time) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, time);
});
}
- 定义一个异步函数changeColor来实现灯的颜色的变化,也就是实现红灯、绿灯、黄灯的切换:changeColor 会先执行 fn,然后暂停执行,直到
timePromise
完成,也就是实现灯亮的时长,再切换灯的颜色
async function changeColor(time, fn) {
fn();
await timePromise(time);
}
- 定义函数run:定义了一个无限循环,在每次循环中,它会依次调用changeColor 函数,并传入不同的颜色函数(red、green 和 yellow),以及不同的等待时间(3000毫秒、2000毫秒和3000毫秒)
async function run () {
while(true) {
await changeColor(3000, red);
await changeColor(2000, green);
await changeColor(3000, yellow);
}
}
结语
下面介绍一下async/await的知识点
async 函数
async
关键字用于定义一个异步函数。异步函数总是返回一个Promise
。- 如果异步函数内部没有任何
await
表达式,则返回的Promise
会被立即解析为undefined
。 - 如果异步函数中有
await
表达式,并且await
后面是一个Promise
,那么该Promise
的结果(fulfilled 或 rejected)将成为整个异步函数的结果。 - 如果异步函数抛出了错误,或者
await
的表达式返回了一个 rejected 的Promise
,那么整个异步函数也会返回一个 rejected 的Promise
。 - 可以使用
try...catch
结构来捕获这些错误。
await 表达式
await
关键字用于等待一个Promise
完成(或拒绝),然后返回Promise
的结果。await
必须在一个async
函数内部使用。- 如果
await
后面是一个已经完成(fulfilled)的Promise
,则返回其结果;如果是 rejected 的Promise
,则会抛出一个错误,需要通过try...catch
捕获。
总结
- async:用于定义异步函数,总是返回一个
Promise
。 - await:用于等待一个
Promise
的完成,并获取其结果。必须在async
函数内部使用。 - 组合使用:
async
和await
一起使用可以让异步代码看起来更接近同步代码,提高代码的可读性和易维护性。
转载自:https://juejin.cn/post/7409948990819090447