如何等待前一个script标签内的函数执行完成后再运行第二个script的代码

问题核心原因 #

1. 原生 setTimeout 不返回 Promise 实例，直接配合 await 使用不会等待定时回调执行，无法达到延迟赋值的预期效果。
2. 第二个script标签的代码为同步执行逻辑，不会等待异步函数loadSuccess的执行流程完成，会提前读取未赋值的var1。

修复方案 #

首先封装setTimeout为返回Promise的工具函数，让await可以正确等待定时结束；再将打印逻辑绑定到异步流程的完成回调中，等待var1赋值完成后再执行。

完整修复代码（保留双script标签结构）

<script>
  var var1;

  // 封装setTimeout实现Promise化延迟
  function delay(time) {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("waiting 5000 ms");
        resolve();
      }, time);
    })
  }

  async function loadSuccess() {
    await delay(5000);
    var1 = "success";
  }
  // 将异步流程的Promise实例挂载到全局，供后续script使用
  window.loadSuccessPromise = loadSuccess();
</script>

<script>
  // 等待异步流程完成后再打印var1
  window.loadSuccessPromise.then(() => {
    console.log(var1); // 5秒后正常输出 success
  })
</script>

可选简化方案（合并script标签）

如果允许调整script标签结构，可直接合并逻辑，无需挂载全局变量：

<script>
  var var1;

  function delay(time) {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("waiting 5000 ms");
        resolve();
      }, time);
    })
  }

  async function loadSuccess() {
    await delay(5000);
    var1 = "success";
  }

  // 自执行async函数统一处理异步流程
  (async () => {
    await loadSuccess();
    console.log(var1);
  })();
</script>

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