如何在事件监听器（Event Listener）作用域外部访问其内部值，并阻止脚本其余部分提前运行

这个问题太常见了——刚接触浏览器异步事件处理时，几乎都会纠结「不想把所有逻辑塞到回调里，但又要等事件触发后再执行后续代码」。完全理解你不想把游戏逻辑全堆在subBtn的点击监听器里的心情，那样代码会变得臃肿且难以维护。下面给你几种优雅的解决方案，结合你的代码示例来修改：

方案一：用 Promise + Async/Await 实现「同步化」的异步等待 #

这是现代JavaScript里最推荐的方式，能让异步事件的等待逻辑看起来像同步代码，彻底避免回调嵌套。

步骤1：把事件监听封装成 Promise #

我们可以写一个函数，返回一个Promise，当按钮被点击时，在监听器里resolve出初始化好的玩家实例：

import Player from './player.js';

// 封装等待玩家提交的逻辑为Promise
function waitForPlayerSubmission() {
  return new Promise((resolve) => {
    // 使用 { once: true } 选项，让监听器只触发一次后自动移除
    subBtn.addEventListener('click', (e) => {
      e.preventDefault();
      
      // 初始化玩家1
      const p1Token = generateToken();
      const player1 = new Player();
      player1.setPlayerName(e.target.form[0].value);
      player1.setToken(p1Token);
      
      // 初始化玩家2
      const p2Token = player1.getToken() === 'X' ? 'O' : 'X';
      const player2 = new Player();
      player2.setPlayerName(e.target.form[1].value);
      player2.setToken(p2Token);
      
      // 把玩家实例传递给外部
      resolve({ player1, player2 });
    }, { once: true });
  });
}

步骤2：用 Async/Await 让后续代码等待事件触发 #

把主游戏逻辑放在async函数里，用await等待Promise完成，这样后续代码只会在玩家提交信息后才执行：

// 初始隐藏"再来一局"按钮
playAgain.classList.add('hidden');

// 主游戏初始化流程
async function initGame() {
  // 等待玩家提交表单，拿到初始化好的玩家实例
  const { player1, player2 } = await waitForPlayerSubmission();
  
  // 👇 这里写原来要放在监听器外部的所有代码，现在可以直接访问player1/player2
  let win;
  let whoWon;
  
  console.log(`游戏开始！玩家：${player1.getPlayerName()}(${player1.getToken()}) vs ${player2.getPlayerName()}(${player2.getToken()})`);
  // 比如启动棋盘交互逻辑、胜负判断逻辑等
  startGameCore(player1, player2);
}

// 启动整个游戏流程
initGame();

// 把核心游戏逻辑抽成单独的函数，保持代码职责单一
function startGameCore(player1, player2) {
  // 你的棋盘点击、胜负判断、加分逻辑等都写在这里
  // 示例：
  function handleBoardClick(cell) {
    // ... 处理落子逻辑
  }
}

这种方案的优势是：代码结构清晰，完全避免了把所有逻辑堆在监听器里的问题，而且async/await的写法非常符合直觉，后续如果有更多异步步骤（比如等待网络请求、动画完成），扩展性也极强。

方案二：把后续逻辑抽成独立函数，在监听器里调用 #

如果你暂时还不熟悉Promise，可以用更直观的「回调函数」思路：把原本要放在监听器外部的逻辑，抽成一个单独的函数，当监听器里完成玩家赋值后，直接调用这个函数并传入玩家实例。

import Player from './player.js';

// 初始化基础变量
let player1 = new Player();
let player2 = new Player();
playAgain.classList.add('hidden');
let win;
let whoWon;

// 把核心游戏逻辑抽成独立函数
function startGame() {
  // 这里可以直接访问已经赋值的player1和player2
  console.log(`游戏开始！玩家：${player1.getPlayerName()}(${player1.getToken()}) vs ${player2.getPlayerName()}(${player2.getToken()})`);
  // 后续的棋盘逻辑、胜负判断等都写在这里
}

// 表单提交监听器
subBtn.addEventListener('click', (e) => {
  e.preventDefault();
  
  // 给player1赋值
  const p1Token = generateToken();
  player1.setPlayerName(e.target.form[0].value);
  player1.setToken(p1Token);
  
  // 给player2赋值
  const p2Token = player1.getToken() === 'X' ? 'O' : 'X';
  player2.setPlayerName(e.target.form[1].value);
  player2.setToken(p2Token);
  
  // 赋值完成后，调用后续游戏逻辑
  startGame();
  
  // 禁用按钮或移除监听器，防止重复提交
  subBtn.disabled = true;
  // 或者用 subBtn.removeEventListener('click', this);
});

这种方案的优势是入门门槛低，不需要理解异步Promise的概念，只需要把代码按职责拆分即可，非常适合快速改造现有代码。

关键注意点 #

1. 防止重复提交：不管用哪种方案，都要记得限制按钮只能触发一次初始化——要么用addEventListener的{ once: true }选项，要么在触发后禁用按钮，或者手动移除监听器，避免用户多次点击导致玩家实例被重复覆盖。
2. 为什么原来的代码拿不到值？：因为浏览器的事件监听器是异步触发的——当你的脚本执行到监听器外部的代码时，用户还没点击按钮，所以player1和player2还是初始的空值；而当用户点击按钮时，外部的代码早就执行完了。所以核心思路就是让后续代码「等待」监听器触发完成。

内容来源于stack exchange