JavaScript代码执行顺序异常，如何控制输入时机？

嘿，这个问题我太熟了！本质上是同步/异步代码执行顺序搞的鬼——JavaScript是单线程的，如果你的输入逻辑没处理好同步/异步关系，就会出现代码先跑完，才触发输入的情况。下面分两种最常见的使用场景给你针对性的解决办法：

浏览器环境 #

如果是在浏览器里用prompt()，它本身是同步阻塞的，按道理会先停住等你输入再继续执行。要是还是出现代码先执行完再弹出输入框，大概率是你把prompt()放到了异步回调里（比如setTimeout、网络请求回调这类），比如：

// 错误示例：先打印日志，再弹出输入框
setTimeout(() => {
  let num = prompt("请输入数字");
}, 0);
console.log("代码先执行完了");

解决起来很简单：把所有需要依赖输入结果的代码，全部放在prompt()之后，确保执行顺序正确：

// 正确写法：先等输入，再执行后续逻辑
let num = prompt("请输入数字");
console.log("你输入的数字是：", num);
// 所有需要用到这个输入值的逻辑都写在这里
console.log(`输入数字的两倍是：${num * 2}`);

Node.js环境 #

Node.js里没有浏览器自带的prompt()，如果用官方的readline模块，它是异步的，很多新手会因为没处理异步逻辑导致代码先跑完才等输入，比如：

// 错误示例：先打印日志，才会提示输入
const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question('请输入数字：', (answer) => {
  console.log(`你输入的是：${answer}`);
  rl.close();
});
console.log("代码先执行完了");

这里有两种优雅的解决方式：

方式1：用回调函数控制顺序 #

把所有依赖输入结果的代码，都放到question的回调函数里，确保输入完成后再执行后续逻辑：

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

// 先等待输入，再执行后续逻辑
rl.question('请输入数字：', (answer) => {
  console.log(`你输入的是：${answer}`);
  // 这里写所有需要用输入值的代码
  calculateSquare(answer);
  rl.close();
});

function calculateSquare(num) {
  console.log(`输入数字的平方是：${num * num}`);
}

方式2：用async/await简化（更推荐） #

把异步的question方法包装成Promise，这样就能用await把异步逻辑转成“同步写法”，代码可读性更高：

const readline = require('readline');

// 把readline.question包装成Promise
function askQuestion(questionText) {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  return new Promise((resolve) => {
    rl.question(questionText, (userAnswer) => {
      rl.close();
      resolve(userAnswer);
    });
  });
}

// 用async函数执行逻辑
async function runApp() {
  // 等待用户输入完成，再继续执行
  let userNum = await askQuestion('请输入数字：');
  console.log(`你输入的数字是：${userNum}`);
  console.log(`输入数字的立方是：${userNum ** 3}`);
}

// 启动程序
runApp();

核心总结 #

JavaScript是单线程语言，异步操作不会阻塞主线程的执行。所以只要记住：所有依赖输入结果的代码，必须放在输入完成的回调函数里，或者用await等待输入完成后再执行，就能完美控制代码的执行顺序和输入时机啦！

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