如何在JavaScript中同时等待Promise与页面load事件完成？

要实现同时等待页面加载完成和myLongFunction执行完毕，且让两者并行处理，核心思路是把「页面加载完成」也转换成Promise，再用Promise.all()同时等待两个Promise的状态变更。

具体实现代码 #

// 1. 把页面load事件转换成Promise，兼容页面已加载完成的情况
const pageLoaded = new Promise(resolve => {
  // 如果页面已经加载完成，直接resolve
  if (document.readyState === 'complete') {
    resolve();
  } else {
    // 否则监听load事件，触发时resolve
    window.addEventListener('load', resolve);
  }
});

// 2. 立即启动myLongFunction，让它和页面加载并行执行
const longTaskCompleted = myLongFunction();

// 3. 同时等待两个任务完成，再执行目标代码
Promise.all([pageLoaded, longTaskCompleted])
  .then(() => {
    // 这里写你需要执行的代码
    console.log('页面加载完成 + 长任务执行完毕，可以开始后续操作');
  })
  .catch(error => {
    // 处理任意一个任务抛出的错误
    console.error('执行过程出错:', error);
  });

为什么这个方案能解决你的问题 #

1. 并行执行不浪费时间：myLongFunction()在代码一开始就被调用，和页面加载流程同时进行，不会等到页面加载完才启动，充分利用了等待页面加载的时间。
2. 不会错过load事件：pageLoadedPromise先判断页面是否已经加载完成（通过document.readyState === 'complete'），如果是就直接resolve；如果不是才监听load事件，避免了「myLongFunction执行太久，页面已经加载完成导致load事件已经触发，后续代码无法执行」的问题。
3. 严格等待两个条件：Promise.all()会等到传入的所有Promise都变为resolved状态后，才执行then里的代码，确保两个条件都满足才启动后续逻辑。

补充：你的两种写法问题分析 #

• 第一种写法（无法执行）：大概率是先等待myLongFunction完成，再去监听load事件——如果myLongFunction执行时页面已经加载完成，load事件早已触发，后续监听自然无法捕获，导致代码不执行。
• 第二种写法（无法并行）：应该是先等页面load事件触发，再调用myLongFunction，两者变成了串行执行，完全浪费了页面加载时可以用来执行长任务的时间。

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