Javascript 如何在函数中等待事件侦听器？

我正在尝试等待一个按钮被点击，然后再进入另一个函数

async function foo() {
    // code before
    await ??? // wait for start button to be clicked before proceeding
    // code after
}

startButton.addEventListener("click", function() {
    return new Promise(); // ???
}, false);

---

如何在另一个函数中使用事件侦听器？

您可以这样操作：

//单击第一个按钮开始该过程
document.getElementById（'beginbtn'）。addEventListener（'click'，function（）{
foo（）；
});
//福
异步函数foo（）{
//隐藏开始按钮
document.getElementById（'beginbtn'）.style.display='none'；
//显示“通过”按钮
document.getElementById（'passbtn'）.style.display='block'；
/*******关注这里******/
log（'--begin…单击“PASS”继续--'）；
等待条（）；
log（'--end--'）；
/*******关注这里******/
//显示开始按钮
document.getElementById（'beginbtn'）.style.display='block'；
//隐藏“通过”按钮
document.getElementById（'passbtn'）.style.display='none'；
}
//酒吧
功能条（）{
返回新承诺（功能（解决、拒绝）{
document.getElementById（'passbtn'）。addEventListener（'click'，function（）{
console.log（'clicked！！！'）；
解决（）；
});
});
}

单击开始
通过
您使用
返回
ing一个
新承诺（）
就在正确的轨道上了。您可以按照以下思路做一些事情：

async btnClick(btn) {
    return new Promise(resolve =>  btn.onclick = () => resolve());
}

然后在您的呼叫代码中：

await btnClick(startButton);

你也许可以让它工作，但可能不应该

有一个大的函数做一些事情，等待输入，然后再做更多的事情，这既麻烦又难以解释

事件监听器可以帮助您解决“等待用户输入”问题，而无需围绕它争论代码。通过先启动一个函数，然后等待事件侦听器启动，您可以在某种程度上撤消该模式

事实上，许多程序员认为必须在链式中创建第一个承诺，成为一个“反模式”，这意味着它违背了良好实践的准则。但这里更大的问题是，这一大功能的大部分在未来将如何减轻你的负担

相反，尝试拆分您的函数。例如：

function preInput(){
    //some setup tasks here
}

function postInput(){
    //some post-input tasks here
}

preInput(); // or elsewhere, depending on needs
startButton.addEventListener("click", postInput);

这一点在将来更容易理解和补充。
谢谢！！只需在
async
和
btn（btn）
；）之间使用一点
函数
）<代码>返回新承诺（resolve=>button.onclick=resolve）也可以工作，而且更干净