如何在Second类按钮点击后再继续First类的代码执行？

要实现First类代码等待Second类按钮点击后再执行，核心是利用JavaScript的Promise + async/await处理异步事件——因为JS是单线程异步模型，无法同步阻塞代码执行。

关键修改步骤 #

1. 在Second类中创建一个Promise，当按钮被点击时resolve该Promise，并提供方法供外部获取这个Promise。
2. 在First类中使用async/await等待这个Promise完成，再执行后续代码（注意：类的构造函数不能是async，因此将异步逻辑放到单独的初始化方法中）。

完整代码示例 #

<html>
<button onclick="myFunction()">Click me!</button>
<script>
class First {
  async init() {
    const second = new Second()
    // 等待Second类的按钮被点击
    await second.waitForButtonClick()
    console.log('Print this ONLY when button from Second class is clicked')
  }
}

class Second {
  constructor() {
    // 创建Promise，点击按钮时resolve
    this.clickPromise = new Promise(resolve => {
      const button = document.createElement('button')
      button.innerText = 'Button from second class'

      button.addEventListener('click', () => {
        console.log('Clicked')
        resolve()
      })

      document.body.appendChild(button)
    })
  }

  // 暴露方法返回等待点击的Promise
  waitForButtonClick() {
    return this.clickPromise
  }
}

function myFunction() {
  const firstInstance = new First()
  firstInstance.init()
}
</script>
</html>

代码说明 #

• Second类：在构造函数中创建clickPromise，按钮点击事件触发时调用resolve()，表示异步事件完成。通过waitForButtonClick方法将Promise暴露给外部。
• First类：init方法是async函数，使用await等待second.waitForButtonClick()的Promise完成，之后才执行console.log。
• myFunction：实例化First后调用init方法启动异步逻辑。

内容的提问来源于stack exchange，提问作者robtot