¿Cómo retrasar un bucle en JavaScript usando async/await con Promise?

A continuación se muestra un fragmento de código de JavaScript que básicamente describe cómo retrasar un bucle en JavaScript usando async/await. En este artículo, estamos usando JavaScript ya sea por navegador web o Node.js. Todos nos enfrentamos a una situación difícil al retrasar un bucle en JavaScript, a diferencia de C++, donde tenemos la función sleep(), pero no hay nada como esto en JavaScript. Todo lo que tenemos en JavaScript es la función setTimeout(), pero esto no es lo que buscamos cuando tenemos una gran cantidad de código para ejecutar después de algún retraso, como resultado surgen conflictos en la ejecución lineal del código en JavaScript. Aquí encontramos una forma asíncrona adecuada de pausar un ciclo por un tiempo específico como solíamos hacer en C++ o C.

¿Qué es asíncrono y espera?

Async y await hacen que las promesas sean más fáciles de escribir. La palabra clave async hace que una función devuelva una promesa: la palabra clave async se usa principalmente al declarar una función.

Sintaxis:

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

await hace que una función espere una Promesa: await se usa principalmente al llamar a una función.

Sintaxis:

await delay();

La promesa en realidad es que atrapa la ejecución del programa dentro de él hasta que no se resuelve, y cuando se resuelve después de un período de tiempo, le devuelve el control al método principal desde donde se llamó.

Aquí, la función waitforme es la función real que nos ayuda a retrasar el código que acepta un argumento como milisegundos, lo que permite al usuario retrasar el código durante el tiempo que elija.

Para comprender Promises en profundidad, debe visitar:   https://www.geeksforgeeks.org/javascript-promises

Puede copiar y pegar directamente el código a continuación en la consola y verificarlo o puede crear un archivo JavaScript separado y cargarlo en Chrome o probarlo en Node.js

Ejemplo:

function waitforme(milisec) {
    return new Promise(resolve => {
        setTimeout(() => { resolve('') }, milisec);
    })
}
 
async function printy() {
    for (let i = 0; i < 10; ++i) {
        await waitforme(1000);
        console.log(i);
    }
    console.log("Loop execution finished!)");
}
 
printy();

Producción:

Nota: Podemos cambiar el valor del parámetro de la función waitforme mientras llamamos a la función para aumentar/disminuir el retraso en el código.