JavaScript脚本初始化时出现竞态条件该如何分析与解决

JavaScript脚本初始化过程中，竞态条件通常出现在多个异步操作同时执行，且后续逻辑依赖这些操作的执行结果时，由于执行顺序不确定导致的问题。比如模块加载、数据请求、DOM初始化等异步任务如果执行顺序不符合预期，就会引发功能异常。

竞态条件的产生原因分析

要解决问题首先需要明确竞态条件出现的核心原因，脚本初始化阶段的竞态通常来自以下几个方面：

• 多个异步任务并行执行，没有明确的执行顺序约束，比如同时发起多个接口请求，后续逻辑依赖所有请求的结果
• 脚本加载顺序不符合预期，比如依赖的第三方库还没加载完成，就执行了调用该库的逻辑
• DOM元素还没渲染完成，就执行了操作DOM的初始化逻辑，导致获取不到对应的元素
• 共享状态的读写没有同步机制，多个初始化逻辑同时修改同一个全局变量，导致状态混乱

竞态条件的分析定位方法

当应用出现初始化相关的异常时，可以通过以下方式定位是否是竞态条件导致：

添加执行日志

在初始化相关的每个关键步骤添加日志，记录执行时间和执行顺序，通过日志对比判断异步任务的执行顺序是否符合预期。示例代码如下：

// 记录初始化步骤的执行日志
function logInitStep(stepName) {
    console.log(`[初始化步骤] ${stepName}，执行时间：${new Date().toLocaleTimeString()}`);
}

// 模拟异步加载模块A
function loadModuleA() {
    return new Promise(resolve => {
        setTimeout(() => {
            logInitStep('模块A加载完成');
            resolve('moduleA');
        }, 500);
    });
}

// 模拟异步加载模块B
function loadModuleB() {
    return new Promise(resolve => {
        setTimeout(() => {
            logInitStep('模块B加载完成');
            resolve('moduleB');
        }, 300);
    });
}

// 执行初始化逻辑
async function init() {
    logInitStep('初始化开始');
    const [a, b] = await Promise.all([loadModuleA(), loadModuleB()]);
    logInitStep('所有模块加载完成，执行后续逻辑');
}
init();

梳理依赖关系

绘制初始化流程的依赖图谱，明确每个初始化任务的前置依赖，检查是否存在依赖的任务没有等待前置任务完成就执行的情况。比如某个功能依赖用户信息和配置信息，就需要确认这两个信息的获取逻辑是否在功能初始化之前完成。

复现异常场景

通过控制网络速度、调整脚本加载顺序等方式复现异常，观察异常出现时的执行上下文，判断是否是执行顺序导致的变量未定义或者状态错误。

竞态条件的解决方案

方案1：使用依赖管理控制执行顺序

如果是多个异步任务存在依赖关系，可以使用Promise或者async/await明确任务的执行顺序，确保前置任务完成后再执行后续逻辑。比如需要等待DOM加载完成再执行初始化逻辑，可以使用以下代码：

// 等待DOM加载完成后执行初始化
function initAfterDOMReady() {
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOM加载完成，执行初始化逻辑');
            // 此处写初始化代码
        });
    } else {
        console.log('DOM已加载完成，执行初始化逻辑');
        // 此处写初始化代码
    }
}
initAfterDOMReady();

方案2：添加状态锁避免重复执行

如果初始化逻辑可能被多次触发，比如同时触发了多个初始化入口，可以添加状态锁，确保初始化逻辑只执行一次。示例代码如下：

let isInitialized = false;
let initPromise = null;

// 初始化函数，添加状态锁
function initApp() {
    // 如果已经初始化完成，直接返回
    if (isInitialized) {
        return Promise.resolve();
    }
    // 如果正在初始化中，返回已有的Promise，避免重复执行
    if (initPromise) {
        return initPromise;
    }
    // 执行初始化逻辑
    initPromise = new Promise(resolve => {
        setTimeout(() => {
            console.log('应用初始化完成');
            isInitialized = true;
            resolve();
        }, 1000);
    });
    return initPromise;
}

// 多次调用初始化函数，只会执行一次
initApp();
initApp();
initApp();

方案3：使用发布订阅模式处理依赖通知

如果多个模块之间的依赖关系比较复杂，可以使用发布订阅模式，当某个初始化任务完成时发布对应的事件，依赖该任务的其他逻辑订阅对应的事件，在事件触发时再执行。示例代码如下：

// 简单的事件发布订阅中心
const eventCenter = {
    events: {},
    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    },
    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => callback(data));
        }
    }
};

// 模块A加载完成后发布事件
function loadModuleA() {
    setTimeout(() => {
        console.log('模块A加载完成');
        eventCenter.emit('moduleA_loaded', 'moduleA_data');
    }, 500);
}

// 模块B依赖模块A，订阅模块A加载完成的事件
eventCenter.on('moduleA_loaded', (data) => {
    console.log('接收到模块A加载完成的通知，模块A数据：', data);
    console.log('执行模块B的初始化逻辑');
});

loadModuleA();

方案4：合理设置脚本加载顺序

对于没有依赖管理的传统脚本，可以通过调整<script>标签的位置和属性来控制加载顺序，比如将依赖的脚本放在前面，或者给脚本添加defer、async属性，其中defer会按照脚本的加载顺序执行，async则是加载完成后立即执行，根据场景选择合适的属性。

总结

JavaScript脚本初始化中的竞态条件核心是异步执行顺序的不确定性导致的，解决问题的核心思路是明确任务依赖、控制执行顺序、添加状态同步机制。开发者可以根据实际的初始化场景选择合适的解决方案，在开发过程中提前梳理初始化流程的依赖关系，也可以有效避免竞态条件的出现。

JavaScript竞态条件脚本初始化异步编程修改时间：2026-07-01 10:01:03