likes
comments
collection
share

场景题:实现一下现实生活中的红绿灯(红 绿 黄 红 绿 . . . )前言 正文 实现效果: 定义函数timePromi

作者站长头像
站长
· 阅读数 15

前言

现实生活中的红绿灯就是红灯、绿灯、黄灯之间不停的切换,这个时候可能就会想到定时器,将定时器嵌套,设置相应的时间,那么接下来我们用代码去实现吧~

正文

定义三个函数,来实现红灯、绿灯、黄灯

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();

实现效果:

场景题:实现一下现实生活中的红绿灯(红 绿 黄 红 绿 . . . )前言 正文 实现效果: 定义函数timePromi

还有一种方法,就是通过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 一起使用可以让异步代码看起来更接近同步代码,提高代码的可读性和易维护性。

场景题:实现一下现实生活中的红绿灯(红 绿 黄 红 绿 . . . )前言 正文 实现效果: 定义函数timePromi

转载自:https://juejin.cn/post/7409948990819090447
评论
请登录