JS与jQuery新手的Promise困惑：执行时机与顺序异常

嘿，作为JS/jQuery新手碰到Promise的这些“反直觉”问题太正常了！我当初刚学的时候也踩过一模一样的坑，咱们来逐个拆解你的困惑：

困惑1：Promise为什么会自行执行？ #

这是Promise的核心特性之一：当你用new Promise()创建实例时，传入的执行器函数（就是那个带resolve/reject参数的函数）会被立即同步执行，和ready()函数里有没有其他代码、有没有调用then()/catch()都没关系。

举个极简例子验证：

$(document).ready(function() {
  // 啥回调都不绑，这个Promise里的代码照样跑
  new Promise((resolve) => {
    console.log("我不管，我先跑了！");
  });
});

哪怕你完全不处理这个Promise的结果，执行器里的代码都会第一时间执行，这是Promise设计的默认行为——让异步操作的启动逻辑能立刻执行，不用等后续的回调绑定。

困惑2：执行顺序为什么不符合预期？ #

这个得搞懂JS的事件循环机制，简单来说JS是单线程的，代码执行分优先级：

1. 先执行所有同步任务（比如直接打印1、2、END的代码）
2. 同步任务跑完后，再处理微任务队列（比如Promise的then/catch回调）
3. 最后才会处理宏任务队列（比如setTimeout、setInterval这类定时器）

你的代码里，实际执行流程是这样的：

1. 同步执行console.log(1) → 打印1
2. 同步执行console.log(2) → 打印2
3. 同步创建Promise，执行器里的setTimeout被加入宏任务队列（3秒后触发）
4. 同步执行console.log('END') → 打印END
5. 同步任务全部完成，开始等待宏任务触发
6. 3秒后setTimeout执行，调用resolve()，把then的回调加入微任务队列
7. 微任务执行，console.log(3) → 打印3

要让顺序变成「1、2 → 等3秒 → 3、END」，你需要把END的打印放到异步回调里，或者用async/await让异步代码看起来像同步：

修正方案1：把END放到then回调中 #

$(document).ready(function() {
  console.log(1);
  console.log(2);

  new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 3000);
  }).then(() => {
    console.log(3);
    console.log('END'); // 这里才是异步执行的位置
  });
});

修正方案2：用async/await简化逻辑（更直观） #

$(document).ready(async function() {
  console.log(1);
  console.log(2);

  // await会暂停当前函数，直到Promise resolve
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 3000);
  });

  console.log(3);
  console.log('END');
});

这样执行顺序就完全符合你的预期啦！

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