如何控制JavaScript代码执行顺序，实现prompt输入前后内容依次展示？

先聊聊你遇到的问题：现在的代码里，setTimeout是异步任务，同步循环会一口气把两次的"before"内容都输出，才会触发prompt，完全不符合你想要的「先显示前置内容→等用户输入→显示后置内容」循环两次的预期。下面给你具体的修改方案，还有不用prompt的输入方式：

一、修改代码实现预期效果 #

咱们可以用async/await把整个流程改成异步串行执行，代码逻辑清晰，完全贴合你的需求：

async function runSequence() {
  for (let i = 0; i < 2; i++) {
    // 输出prompt前的内容
    $("div").append("I Want to Display this before user enter input in Prompt <br>");
    // 加上你期望的提示文本
    $("div").append("Now Take Input <br>");
    // 等待用户完成输入（用Promise包装prompt，配合await阻塞流程）
    await new Promise((resolve) => {
      const userInput = prompt("test");
      // 这里可以加输入后的处理逻辑，比如打印输入值
      console.log("用户输入内容：", userInput);
      resolve();
    });
    // 用户输入完成后，输出后置内容
    $("div").append("I Want to Display this after user enter input in Prompt <br>");
  }
}

// 启动执行
runSequence();

为什么原来的代码不行？ #

原来的代码里，setTimeout会把回调扔进浏览器的事件队列，而同步的for循环会先把两次的"before"内容全部输出，才会去执行事件队列里的prompt。而且你没给setTimeout设置延迟时间，prompt会立刻弹出，但此时两次前置内容已经都显示了，完全打乱了你想要的顺序。

如果不想用async/await，也可以用递归实现串行执行：

let loopCount = 0;
function executeOneCycle() {
  if (loopCount >= 2) return;
  
  // 输出前置内容
  $("div").append("I Want to Display this before user enter input in Prompt <br>");
  $("div").append("Now Take Input <br>");
  // 等待用户输入
  const userInput = prompt("test");
  // 输出后置内容
  $("div").append("I Want to Display this after user enter input in Prompt <br>");
  
  loopCount++;
  executeOneCycle();
}

executeOneCycle();

这个写法也能达到要求，每次完成一次完整的「前置→输入→后置」流程后，再执行下一次循环。

二、不用prompt的用户输入方式 #

prompt是浏览器原生的弹窗，体验比较生硬，现在更常用的替代方式有这些：

• 自定义模态弹窗：用HTML、CSS和JS自己写一个弹窗，里面放输入框和确认按钮，能完全自定义样式和交互，体验更友好。比如：

  <!-- 自定义弹窗 -->
  <div id="customInputModal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.2);">
    <p>请输入内容：</p>
    <input type="text" id="userInput" style="padding: 0.5rem; width: 100%; margin-bottom: 1rem;">
    <button onclick="handleInputSubmit()" style="padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px;">确认</button>
  </div>
  

  然后用JS控制弹窗的显示隐藏，获取输入值，比如：

  let resolveInput;
  
  function showCustomInput() {
    document.getElementById("customInputModal").style.display = "block";
    return new Promise(resolve => {
      resolveInput = resolve;
    });
  }
  
  function handleInputSubmit() {
    const inputValue = document.getElementById("userInput").value;
    document.getElementById("customInputModal").style.display = "none";
    resolveInput(inputValue);
  }
  
  // 配合之前的async函数使用
  async function runSequence() {
    for (let i = 0; i < 2; i++) {
      $("div").append("I Want to Display this before user enter input in Prompt <br>");
      $("div").append("Now Take Input <br>");
      // 用自定义弹窗替代prompt
      const userInput = await showCustomInput();
      console.log("用户输入：", userInput);
      $("div").append("I Want to Display this after user enter input in Prompt <br>");
    }
  }
  

• 页面内输入区域：直接在页面上放置输入框和按钮，用户输入后点击按钮触发后续逻辑，适合不需要弹窗的场景，体验更流畅自然。

• 第三方UI组件库：比如Bootstrap的Modal、Element UI的Input组件等，这些库已经封装好了成熟的输入组件/弹窗，直接调用即可，省去自己写样式和交互的麻烦。

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