JavaScript中Try Catch控制台日志延迟显示的原因咨询

你写的这段代码通过无限循环调用prompt获取用户输入，只有输入left或right才会终止循环；输入错误时会抛出InputError，进入catch块后重新发起输入。但实际运行时，每次输入错误后，控制台不会实时打印「Not a valid direction. Try again.」，而是要等用户输入正确答案或点击取消后，才一次性显示所有错误日志。

代码示例 #

class InputError extends Error { }
function promptDirection(question) {
  let result = prompt(question);
  if (result.toLowerCase() == "left") return "L";
  if (result.toLowerCase() == "right") return "R";
  throw new InputError("Invalid direction: " + result);
}

for (;;) {
  try {
    let dir = promptDirection("Where?");
    console.log("You chose ", dir);
    break;
  } catch (e) {
    if (e instanceof InputError) {
      console.log("Not a valid direction. Try again.");
    } else {
      throw e;
    }
  }
}

原因解析 #

这是因为浏览器的同步弹窗（prompt、alert、confirm都属于这类）会直接阻塞主线程，连控制台的输出刷新都会被卡住。

每次输入错误点击确认后，catch块里的console.log其实已经执行了，但此时prompt弹窗会立即再次弹出，主线程一直被弹窗占据，浏览器根本没机会把日志渲染到控制台界面。直到你最后输入正确内容或取消弹窗，主线程恢复正常运行，才会把之前积压的所有错误提示一次性打印出来。

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