如何让JavaScript函数等待输入值？解决createCharacter执行时序问题

这问题我太熟了——本质上是同步代码和异步用户交互的冲突！你现在的代码是同步执行的，getUserInput()刚被调用就直接往下走了，根本没等用户在输入框里完成输入对吧？

问题根源 #

用户输入（比如填写输入框、点击确认按钮）属于异步事件，同步函数不会主动等待这类事件完成，所以你的createCharacter()会直接执行完所有同步逻辑，完全没给用户输入的机会。

两种可行的解决方案 #

方案1：用Promise + async/await（推荐，代码更清晰）

先把getUserInput()封装成返回Promise的函数，当用户完成输入动作时，再resolve输入值：

function getUserInput() {
  return new Promise((resolve) => {
    // 替换成你实际的输入框和确认按钮DOM元素
    const nameInput = document.getElementById('characterName');
    const confirmBtn = document.getElementById('confirmName');

    // 处理提交逻辑的内部函数
    const handleInputComplete = () => {
      const inputValue = nameInput.value.trim();
      if (inputValue) {
        // 拿到有效输入后，resolve给调用者
        resolve(inputValue);
        // 解绑事件，避免重复触发
        confirmBtn.removeEventListener('click', handleInputComplete);
        nameInput.removeEventListener('keydown', handleEnterKey);
      } else {
        alert('请输入有效的角色名称！');
      }
    };

    // 支持回车提交
    const handleEnterKey = (e) => {
      if (e.key === 'Enter') {
        handleInputComplete();
      }
    };

    // 绑定事件监听
    confirmBtn.addEventListener('click', handleInputComplete);
    nameInput.addEventListener('keydown', handleEnterKey);
  });
}

然后把createCharacter()改成async函数，用await等待getUserInput()的结果：

async function createCharacter() {
  console.log('请设置你的角色名称：');
  // 这里会暂停执行，直到用户完成输入
  const name = await getUserInput();
  console.log(`正在创建角色：${name}`);
  // 这里写后续的角色创建逻辑，比如初始化属性、保存到本地等
}

// 调用函数
createCharacter();

方案2：用回调函数（传统异步写法）

如果不想用Promise和async/await，也可以给getUserInput()传入一个回调函数，当用户输入完成后执行这个回调：

function getUserInput(onInputComplete) {
  const nameInput = document.getElementById('characterName');
  const confirmBtn = document.getElementById('confirmName');

  const handleSubmit = () => {
    const inputValue = nameInput.value.trim();
    if (inputValue) {
      // 调用回调函数，把输入值传进去
      onInputComplete(inputValue);
      // 解绑事件
      confirmBtn.removeEventListener('click', handleSubmit);
      nameInput.removeEventListener('keydown', handleEnterKey);
    } else {
      alert('请输入有效的角色名称！');
    }
  };

  const handleEnterKey = (e) => {
    if (e.key === 'Enter') {
      handleSubmit();
    }
  };

  confirmBtn.addEventListener('click', handleSubmit);
  nameInput.addEventListener('keydown', handleEnterKey);
}

function createCharacter() {
  console.log('请设置你的角色名称：');
  // 传入回调函数，输入完成后才会执行这里的逻辑
  getUserInput((name) => {
    console.log(`正在创建角色：${name}`);
    // 后续角色创建逻辑写在这里
  });
}

createCharacter();

额外注意事项 #

• 一定要解绑事件监听：不然多次调用函数会重复绑定事件，导致一次触发多次执行
• 加入输入校验：避免用户输入空值或无效内容
• 如果是Node.js环境（而非浏览器），可以用readline模块的异步方法来处理命令行输入，逻辑类似但API不同

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