所以现在我有一些async/await函数的麻烦，我的目标是更新一个变量，当用户点击一个按钮。完成后，我将对更新后的变量进行控制台日志记录。例如，在我的代码中，我创建了一个全局变量称为结果，然后我有一个函数与事件监听器来改变变量的值，当按钮被点击，但当我控制台日志变量，我得到一个未定义的变量，而不是我设置它的值。代码如下: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>
我怎样才能使它，所以我必须等待更新完成的函数，然后我控制台记录更新的变量?
您的代码没有通过单击触发事件，您应该在resolve
中传递参数result
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>当您的console.log在realMain函数。result变量仍未设置。当onlyBtn收到click事件时设置。因此，您只需要在事件回调中打印结果。
假设你的代码片段是你的完整代码，step异步函数的逻辑是错误的。它没有做任何与async相关的事情，只是设置一个事件侦听器。所以它不应该是异步的。
你只需要移动你的resolve()调用到你的eventListener，看这里