如何等待用户单击然后控制台日志变量

Question

所以现在我在使用 async/await 函数时遇到了一些问题，我的目标是在用户单击按钮时更新变量。完成此操作后，我将控制台记录更新的变量。例如，在我的代码中，我创建了一个名为 result 的全局变量，然后我有一个带有事件侦听器的函数，可以在单击按钮时更改变量的值，但是当我控制台记录变量时，我得到一个未定义的变量而不是值我把它设置为。这是代码： 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();

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>

我怎样才能让它必须等待更新完成的功能，然后我控制台记录更新的变量？

Answer 1

当你 console.log 在 realMain 函数中。 result 变量仍未设置。该值在 onlyBtn 收到 click 事件时设置。所以你只需要在事件回调中打印结果即可。

假设您的代码段是您的完整代码，step 异步函数的逻辑是错误的。它没有做任何与异步相关的事情，只是设置了一个事件监听器。所以它根本不应该是异步的。

Answer 2

您的代码没有通过点击触发事件，您应该在 resolve 中传递参数结果

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>

Answer 3

你只需要移动你的 resolve() 调用你的事件监听器，看here

如何等待用户单击然后控制台日志变量

how to wait for user to click then console log variable

javascript

asynchronous

onclick

async-await