如何使用async/await和Promise在JavaScript中延迟循环

下面是一段JavaScript代码片段，主要说明如何在JavaScript中使用async/await延迟循环。在本文中，我们使用JavaScript，不管是在Web浏览器还是Node.js中。我们在延迟循环方面都面临困难，这与C++不同，C++中有sleep()函数，但JavaScript中没有这样的函数。在JavaScript中，我们只有setTimeout()函数，但当我们有一大段代码需要在延迟之后执行时，这并不是我们所期望的，因此在JavaScript中存在代码的线性执行冲突。在这里，我们找到了一种适当的异步方式来暂停循环一段特定的时间，就像我们以前在C++或C中所做的一样。

什么是async和await？

async和await使得编写Promise更容易。async关键字使得函数返回一个Promise：async关键字主要用于声明函数时使用。

语法：

async function delay() {
    return new Promise(resolve => {resolve()})
}

HTML

Copy

JavaScript中的await 使函数等待一个Promise：调用函数时主要使用await。

语法：

await delay();

HTML

Copy

方法： Promise实际上是将程序执行陷入其中，直到它得到解决，当它在一段时间后得到解决并将控制权从调用的主方法返回。

这里，waitforme函数是真正帮助我们延迟代码的函数，它接受一个毫秒参数，允许用户延迟一段时间执行代码。

您可以直接将下面的代码复制粘贴到控制台进行检查，或者您可以创建一个单独的JavaScript文件，并在Chrome中加载它或尝试在Node.js中运行。

示例： 这个例子展示了上述方法的使用。

function waitforme(millisec) {
    return new Promise(resolve => {
        setTimeout(() => { resolve('') }, millisec);
    })
}

async function printy() {
    for (let i = 0; i < 10; ++i) {
        await waitforme(1000);
        console.log(i);
    }
    console.log("Loop execution finished!)");
}

printy();

HTML

Copy

输出：

0
1
2
3
4
5
6
7
8
9
Loop execution finished!)

HTML

Copy

注意： 我们可以在调用函数时更改waitforme函数的参数值，以增加/减少代码中的延迟。