Así que ahora mismo tengo algunos problemas con las funciones async/await y mi objetivo es actualizar una variable cuando el usuario hace clic en un botón. Una vez hecho esto, registro en la consola la variable actualizada. Por ejemplo, en mi código, creo una variable global llamada resultado y luego tengo una función con un detector de eventos para cambiar el valor de la variable cuando se hace clic en el botón, pero cuando registro la variable en la consola, obtengo una variable indefinida y no el valor. Lo configuré. Aquí está el código: archivo JS
let onlyBtn = document.getElementById("onlyButton"); let result; async function realMain(){ await step(); console.log(result); } async function step(){ return new Promise((resolve) =>{ onlyBtn.addEventListener("click", function(){ result = "nice"; }); resolve(); }); } realMain();archivo HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div> <button id="onlyButton">Run</button> </div> <script src="app.js"> </script> </body> </html>¿Cómo puedo hacer que tenga que esperar la función donde se realiza la actualización, luego registro en la consola la variable actualizada?
Cuando console.log en la función realMain . La variable de result aún no está configurada. El valor se establece cuando onlyBtn recibe un evento de click . Entonces solo necesita imprimir el resultado en la devolución de llamada del evento.
Y asumiendo que su fragmento es su código completo, la lógica para la función asíncrona de step es incorrecta. No está haciendo nada relacionado con async, solo configurando un detector de eventos. Por lo tanto, no debería ser asíncrono en absoluto.
su código no activa el evento al hacer clic, y debe pasar el resultado del argumento en la resolución
let onlyBtn = document.getElementById("onlyButton"); let result; async function realMain() { await step().then((res) => { console.log(res); }); } async function step() { return new Promise((resolve) => { onlyBtn.addEventListener("click", function () { result = "nice"; resolve(result); }); }); } realMain(); <div> <button id="onlyButton">Run</button> </div>