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

异步脚本加载中的竞态条件与解决方案

DDD

发布： 2025-11-16 17:44:02

原创

369人浏览过

异步脚本加载中的竞态条件与解决方案

本文探讨了在异步加载脚本时可能出现的竞态条件，以及一种通过函数桩（stubs）延迟执行来解决此问题的方法。通过在脚本加载前设置函数桩，将函数调用参数存储起来，待脚本加载完成后再执行，可以有效避免因函数未定义而导致的错误。

在使用 JavaScript 进行 Web 开发时，异步加载脚本是一种常见的优化手段，可以避免阻塞主线程，提升页面加载速度。然而，不当的异步脚本加载方式可能导致竞态条件，即在脚本加载完成之前，尝试调用其中定义的函数，从而引发错误。

竞态条件的产生

考虑以下场景：

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;
}

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

登录后复制

这段代码尝试异步加载一个脚本，该脚本将一些函数添加到 window[NAMESPACE] 命名空间下。之后，代码尝试调用该脚本中定义的 foo() 函数。

表面上看，app.initialized 标志位似乎可以保证 foo() 函数在脚本加载完成后才被调用。但实际上，由于脚本是异步加载的，foo() 函数可能在脚本完全加载并执行之前就被调用，导致 foo() 函数未定义错误。即使app.initialized为true，也仅仅代表开始加载脚本，并不代表脚本加载完成。

解决方案：函数桩（Stubs）与延迟执行

稿定AI文案

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

查看详情

为了解决这个问题，一种常见的做法是使用函数桩（stubs）和延迟执行。其核心思想是在脚本加载之前，先在 window[NAMESPACE] 命名空间下创建 foo() 函数的占位符（即函数桩），这些占位符会将函数调用参数存储起来。待脚本加载完成后，脚本会遍历这些存储的参数，并使用真正的 foo() 函数执行这些调用。

以下是一个示例代码，展示了如何使用函数桩实现延迟执行：

const NAMESPACE = 'myApp';

// 创建函数桩
window[NAMESPACE] = window[NAMESPACE] || {};
window[NAMESPACE].foo = function() {
    // 初始化参数数组
    window[NAMESPACE].foo.q = window[NAMESPACE].foo.q || [];
    // 将参数添加到队列中
    window[NAMESPACE].foo.q.push(arguments);
};

// 异步加载脚本
const app = window[NAMESPACE];
if (!app.initialized) {
    const script = document.createElement('script');
    script.async = true;
    script.src = 'your_script.js'; // 替换为你的脚本 URL
    document.getElementsByTagName('script')[0].appendChild(script);
    app.initialized = true;
}

// 在脚本加载前调用 foo()
window[NAMESPACE].foo('arg1', 'arg2');
window[NAMESPACE].foo('arg3');

// 脚本内容 (your_script.js)
(function() {
  // 真正的 foo() 函数
  window[NAMESPACE].foo = function(arg1, arg2) {
    console.log('Real foo() called with:', arg1, arg2);
  };

  // 处理延迟的调用
  if (window[NAMESPACE].foo.q) {
    for (let i = 0; i < window[NAMESPACE].foo.q.length; i++) {
      window[NAMESPACE].foo.apply(null, window[NAMESPACE].foo.q[i]);
    }
    // 清空队列
    window[NAMESPACE].foo.q = [];
  }
})();

登录后复制

代码解释：

创建函数桩： 在脚本加载之前，先创建一个名为 window[NAMESPACE].foo 的函数桩。这个函数桩会将所有传入的参数存储到 window[NAMESPACE].foo.q 数组中。
异步加载脚本： 异步加载包含真正 foo() 函数的脚本。
调用 foo()： 在脚本加载之前，可以安全地调用 window[NAMESPACE].foo()，因为函数桩已经存在。
脚本执行： 当脚本加载完成后，脚本会覆盖函数桩，并使用真正的 foo() 函数。然后，脚本会遍历 window[NAMESPACE].foo.q 数组，并使用真正的 foo() 函数执行所有之前延迟的调用。

注意事项：