如何使用异步/等待和Promise在JavaScript中延迟循环

下面是一个JavaScript代码片段，基本上描述了如何使用异步/等待在JavaScript中延迟循环。在本文中，我们使用JavaScript，无论是在Web浏览器还是Node.js中。我们在延迟JavaScript循环方面面临困难的情况与C++不同，C++中有sleep()功能，但是在JavaScript中却没有类似的功能。在JavaScript中，我们只有setTimeout()函数，但是当我们需要在一些延迟后执行大量代码时，这并不是我们所要的，因此，在JavaScript中存在代码的线性执行冲突。在这里，我们找到了一种适当的异步方式来暂停循环，就像我们在C++或C中一样。

什么是异步和等待？

异步和等待使得Promise更容易编写。异步关键字使函数返回一个Promise：异步关键字主要用于声明函数。

语法：

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

JavaScript await 使函数等待一个Promise的完成：await主要是在调用函数时使用。

语法：

await delay();

方法： 实际上，Promise会将程序执行的控制流程困住，直到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();

输出:

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

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