jQuery的$(document).ready是否等待JSON文件加载？如何确保JSON加载与DOM就绪后执行DOM操作

核心问题拆解 #

先给你明确一个关键结论：jQuery的$(document).ready()（包括简写的$(function(){})）只会等待DOM结构解析完成，完全不会管异步请求（比如你的$.getJSON）是否加载完毕。这就是你之前尝试失败的原因——DOM就绪的时机可能比JSON加载早，这时候就算你把init()放进$(function())里，要么cfg还没被赋值，要么DOM元素虽然存在但数据还没准备好，自然达不到预期效果。

靠谱的解决方案 #

我们的目标是：只有当DOM完全就绪，同时JSON数据也加载完成后，才执行init()。这里有几种实用的实现方式：

方式一：先等DOM就绪，再发起JSON请求 #

这是最直接的思路——把JSON请求的触发时机放在DOM就绪之后，这样当JSON加载完成调用init()时，DOM肯定已经准备好了：

var cfg;

function getJSONconfigdata() {
    $.getJSON("/quizdata.json", function (json) {
        cfg = json;
        init(); // 此时DOM已经就绪，放心操作DOM元素
    });
}

// 先确保DOM就绪，再去拉取JSON数据
$(document).ready(function() {
    getJSONconfigdata();
});

function init() {
    // 这里可以安全地把cfg里的数据插入到DOM中了
    // 举个例子：$('.quiz-container').html(cfg.quizContent);
}

方式二：用状态标记，双条件触发初始化 #

如果因为业务需求，你需要提前发起JSON请求（比如想让数据加载更早开始），那可以设置两个状态标记，分别记录DOM是否就绪、JSON是否加载完成，当两个标记都为true时再执行init()：

var cfg;
var isDomReady = false;
var isJsonLoaded = false;

function getJSONconfigdata() {
    $.getJSON("/quizdata.json", function (json) {
        cfg = json;
        isJsonLoaded = true;
        checkAndInit(); // JSON加载完，检查是否满足初始化条件
    });
}

$(document).ready(function() {
    isDomReady = true;
    checkAndInit(); // DOM就绪，检查是否满足初始化条件
});

function checkAndInit() {
    // 两个条件都满足才执行初始化
    if (isDomReady && isJsonLoaded) {
        init();
    }
}

function init() {
    // 放心操作DOM和使用cfg数据
}

// 提前发起JSON请求
getJSONconfigdata();

方式三：用Promise实现更优雅的异步等待 #

如果你想写更现代的代码，可以用jQuery的Promise机制，把DOM就绪和JSON请求都包装成Promise，然后用$.when()等待两者全部完成：

var cfg;

// 把DOM就绪事件包装成Promise
var domReadyPromise = $.Deferred(function(defer) {
    $(defer.resolve);
}).promise();

// 把JSON请求包装成Promise，同时保存返回的数据
var jsonLoadPromise = $.getJSON("/quizdata.json").then(function(json) {
    cfg = json;
    return json;
});

// 等待两个异步操作都完成后，执行初始化
$.when(domReadyPromise, jsonLoadPromise).done(function() {
    init();
});

function init() {
    // 安全操作DOM和cfg数据
}

再强调一遍关键结论 #

• $(document).ready() 绝对不会等待异步请求完成，它只负责监听DOM的解析状态。
• 要确保init()能安全操作DOM和使用JSON数据，必须同时满足「DOM就绪」和「JSON加载完成」两个条件，以上三种方式都能帮你实现这个目标。

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