JS实现休眠 | 青训营笔记

用户1437226172254
374 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的第3天。 在执行某项功能时，我们有时希望该功能可以被延时调用，一般的编程语言中可以使用封装好的sleep()方法实现延时，但由于JavaScript是单线程语言所以并不具有sleep()方法，所以我选择用通过Promises，async和await的功能来实现同样的功能。

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
    const repeatedGreetings = async () => {
        await sleep(1000)
        console.log(1)
        await sleep(1000)
        console.log(2)
        await sleep(1000)
        console.log(3)
    }
repeatedGreetings()

通过Promises，async和await的功能，可以编写一个sleep()函数，该函数将按预期运行。但是，只能从 async函数中调用此自定义 sleep() 函数，且需要将其与await一起使用。因为await导致代码的同步执行暂停，直到Promise被解决为止。 也可以通过setTimeout()方法来实现函数延时执行，在查阅过setTimeout()方法的文档后发现，setTimeout()方法需要传入两个参数，分别是需要延时调用的函数和需要延迟的毫秒数，其中第一个参数可以是已经定义好了的函数名或具体的函数方法体，具体实现如下：

setTimeout(() => console.log(1), 1000)`
setTimeout(() => console.log(2), 1000)`
setTimeout(() => console.log(3), 1000)`
for(let i = 0; i <= 3; i++) {
    setTimeout(() => console.log(`#${i}`), 1000)``
}

但是这样下来，三个打印的日志信息在经过1000毫秒的单次延时后，会一起显示，而不是每次延时1000毫秒的效果，原因是setTimeout()方法是作为同步代码执行，并且对setTimeout()的多次调用均同时运行。每次调用 setTimeout()都会创建异步代码，该代码将在给定延迟后稍后执行。由于代码段中的每个延迟都是相同的，因此所有排队的代码将在单个延迟后同时运行。 如前所述，setTimeout() 实际上不是 sleep() 函数，取而代之的是，它只是将异步代码排入队列以供以后执行。幸运的是，可以使用 setTimeout() 在JavaScript中创建自己的 sleep() 函数。

avatar
文章
阅读
粉丝