分析与解决：JavaScript 脚本初始化中的竞态条件-js教程-PHP中文网

分析与解决：JavaScript 脚本初始化中的竞态条件

碧海醫心

发布： 2025-11-16 16:31:00

原创

116人浏览过

分析与解决：javascript 脚本初始化中的竞态条件

本文旨在探讨 JavaScript 脚本异步加载初始化过程中可能出现的竞态条件，并分析一种通过函数占位符（stubs）来解决该问题的方案。我们将深入研究这种方法的工作原理，并讨论其潜在的优缺点，帮助开发者更好地理解和避免类似问题。

在 Web 开发中，经常需要异步加载 JavaScript 脚本，以提高页面加载速度和用户体验。然而，异步加载脚本也可能引入竞态条件，导致在脚本完全加载和初始化之前，尝试调用脚本中的函数或访问其定义的变量，从而引发错误。本文将深入分析这种竞态条件，并探讨一种常见的解决方案：使用函数占位符（stubs）。

竞态条件分析

考虑以下场景：

const NAMESPACE = 'MyApp';
const script_url = 'https://example.com/analytics.js';

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

// 后续代码尝试调用脚本中的函数
if (window[NAMESPACE] && window[NAMESPACE].initialized) {
    window[NAMESPACE].foo(....);
}

登录后复制

这段代码的目的是异步加载一个名为 analytics.js 的脚本，该脚本将一些函数添加到全局命名空间 MyApp 下。然而，由于脚本是异步加载的，window[NAMESPACE].foo() 可能会在 analytics.js 完全加载并初始化之前被调用。这意味着 foo() 函数可能尚未定义，导致 JavaScript 运行时错误。即使添加了 app.initialized 的判断，也无法完全避免竞态条件，因为 initialized 的设置仅仅表示脚本加载的启动，不代表脚本内部函数已经完成初始化。

立即学习“Java免费学习笔记（深入）”；

使用函数占位符（Stubs）解决竞态条件

一种常见的解决方案是使用函数占位符（stubs）。这种方法的核心思想是在脚本加载之前，先在全局命名空间中创建一些空的函数占位符。这些占位符函数会将所有的调用参数存储在一个队列中。当脚本加载完成后，它会遍历这个队列，并使用实际的函数来处理这些参数。

以下是一个示例代码，展示了如何使用函数占位符：

紫东太初

中科院和武汉AI研究院推出的新一代大模型

查看详情

const NAMESPACE = 'MyApp';
const script_url = 'https://example.com/analytics.js';

// 创建函数占位符
window[NAMESPACE] = window[NAMESPACE] || {};
window[NAMESPACE].queue = [];
const methods = ['foo', 'bar', 'baz']; // 假设 analytics.js 中包含 foo, bar, baz 函数

methods.forEach(methodName => {
    window[NAMESPACE][methodName] = function() {
        window[NAMESPACE].queue.push({
            method: methodName,
            args: arguments
        });
    };
});

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

// 示例调用
window[NAMESPACE].foo('arg1', 'arg2');
window[NAMESPACE].bar('arg3');

// analytics.js 加载完成后，处理队列中的调用
// 在 analytics.js 中：
// window[NAMESPACE].processQueue = function() {
//   window[NAMESPACE].queue.forEach(item => {
//     window[NAMESPACE][item.method].apply(null, item.args);
//   });
//   window[NAMESPACE].queue = []; // 清空队列
//   delete window[NAMESPACE].processQueue; // 删除 processQueue 函数
// };
// window[NAMESPACE].processQueue();

登录后复制

在这个示例中，我们首先创建了一个名为 queue 的数组，用于存储函数调用信息。然后，我们为 foo、bar 和 baz 函数创建了占位符函数。当这些函数被调用时，它们会将函数名和参数存储到 queue 数组中。

在 analytics.js 脚本加载完成后，它会定义一个 processQueue 函数，该函数会遍历 queue 数组，并使用实际的函数来处理这些参数。最后，processQueue 函数会清空 queue 数组，并删除自身，以避免重复处理。