基于异步脚本加载的竞态条件及解决方案-js教程-PHP中文网

基于异步脚本加载的竞态条件及解决方案

霞舞

发布： 2025-11-16 16:23:01

原创

263人浏览过

基于异步脚本加载的竞态条件及解决方案

本文深入探讨了在使用异步脚本加载初始化分析跟踪器时可能出现的竞态条件问题。通过分析示例代码，揭示了在脚本加载完成前调用脚本内函数可能导致的错误。同时，详细介绍了通过预先设置函数桩（stubs）来解决该问题的策略，确保函数调用在脚本加载完成后正确执行，从而避免竞态条件带来的潜在风险。

在使用异步脚本加载第三方库或模块时，尤其是在初始化分析跟踪器等场景下，很容易遇到竞态条件的问题。这意味着，你尝试调用某个函数时，该函数可能尚未被加载和定义，从而导致程序出错。下面我们将通过一个具体的例子来分析这个问题，并提供一种常见的解决方案。

问题分析

假设我们有如下代码，用于初始化一个分析跟踪器：

const app = window[NAMESPACE];
if (!app.initialized) {
    const script = document.createElement('script');
    script.async = true;
    script.src = `${script_url}?namespace=${NAMESPACE}`;
    document.getElementsByTagName('script')[0].appendChild(script);
    app.initialized = true;
}

登录后复制

这段代码的目的是异步加载一个脚本，并将脚本中的函数注入到全局命名空间 window[NAMESPACE] 中。之后，我们可能会在其他地方调用该脚本中的函数，例如 foo()：

if (app.initialized) {
    window[NAMESPACE].foo(....)
}

登录后复制

表面上看，app.initialized 标志位似乎可以保证 foo() 函数在脚本加载完成后才被调用。然而，实际上存在一个潜在的竞态条件：app.initialized 被设置为 true 后，脚本的加载和执行仍然需要时间。在这段时间内，如果 foo() 函数被调用，那么它可能尚未被定义，从而导致错误。

竞态条件的根源

竞态条件的根本原因在于异步加载的特性。script.async = true 使得脚本的加载不会阻塞主线程的执行。因此，app.initialized = true 仅仅表示脚本的加载过程已经启动，而不能保证脚本已经加载完成并执行。

解决方案：函数桩（Stubs）

为了解决这个问题，一种常见的解决方案是在脚本加载前，预先在 window[NAMESPACE] 中设置函数桩（stubs）。这些函数桩的作用是接收函数调用，并将调用参数存储起来。当脚本加载完成后，再执行这些被延迟的调用。

稿定AI文案

小红书笔记、公众号、周报总结、视频脚本等智能文案生成平台

查看详情

以下是一个简单的函数桩示例：

window[NAMESPACE] = window[NAMESPACE] || {};
window[NAMESPACE].foo = function() {
    // 将调用参数存储到队列中
    window[NAMESPACE].foo.queue = window[NAMESPACE].foo.queue || [];
    window[NAMESPACE].foo.queue.push(arguments);
};

登录后复制

在这个例子中，我们定义了一个 foo 函数桩，它会将所有调用参数存储到 window[NAMESPACE].foo.queue 队列中。

当脚本加载完成后，脚本内部需要负责处理这个队列，并将存储的调用参数传递给真正的 foo 函数：

// 脚本加载完成后执行
window[NAMESPACE].foo = function() {
    // 真正的 foo 函数实现
    console.log("真正的 foo 函数被调用");
};

// 处理队列中的调用
if (window[NAMESPACE].foo.queue) {
    window[NAMESPACE].foo.queue.forEach(args => {
        window[NAMESPACE].foo.apply(null, args);
    });
    window[NAMESPACE].foo.queue = []; // 清空队列
}

登录后复制

完整示例

下面是一个完整的示例，展示了如何使用函数桩来解决异步脚本加载的竞态条件问题：

<!DOCTYPE html>
<html>
<head>
  <title>异步脚本加载竞态条件示例</title>
</head>
<body>

<script>
  const NAMESPACE = 'MyLib';
  const script_url = 'my-lib.js'; // 假设的脚本 URL

  // 设置函数桩
  window[NAMESPACE] = window[NAMESPACE] || {};
  window[NAMESPACE].foo = function() {
    window[NAMESPACE].foo.queue = window[NAMESPACE].foo.queue || [];
    window[NAMESPACE].foo.queue.push(arguments);
    console.log("函数桩 foo 被调用，参数已入队");
  };

  // 异步加载脚本
  const app = window[NAMESPACE];
  if (!app.initialized) {
    const script = document.createElement('script');
    script.async = true;
    script.src = script_url;
    document.head.appendChild(script);
    app.initialized = true;
  }

  // 模拟后续调用 foo 函数
  setTimeout(() => {
    window[NAMESPACE].foo('arg1', 'arg2');
  }, 100);
</script>

<script>
  // my-lib.js (模拟脚本内容)
  window.MyLib = window.MyLib || {};
  window.MyLib.foo = function() {
    console.log("真正的 foo 函数被调用，参数:", arguments);

    // 处理队列中的调用
    if (window.MyLib.foo.queue) {
      window.MyLib.foo.queue.forEach(args => {
        window.MyLib.foo.apply(null, args);
      });
      window.MyLib.foo.queue = []; // 清空队列
    }
  };

  console.log("脚本 my-lib.js 加载完成");
</script>

</body>
</html>

登录后复制

注意事项