jquery $document.ready 是否等待加载 json 文件？答案

【问题标题】：Does jquery $document.ready wait for json files to be loaded?jquery $document.ready 是否等待加载 json 文件？
【发布时间】：2021-02-09 15:50:25
【问题描述】：

我从 json 文件中获取 HTML 配置数据。加载后，在将 HTML 插入现有元素之前，我需要确保文档已准备就绪。

    var cfg;
    function getJSONconfigdata() {
        $.getJSON("/quizdata.json", function (json) {
            cfg = json;          
            //Now do everything else
            init();
        });
    }
    getJSONconfigdata()

    function init(){
        //Plug cfg values into existing dom elements. but they may not exist yet.
        //...
    }

init()在json文件被解析后被调用，但是如何确保dom也准备好了？我试过$(function (){ init(); }) ;但不能让它工作 - 它似乎在加载 json 之前触发。

【问题讨论】：

不是，你的 init 属于回调，getJSONconfigdata 属于 ready
没有理由将 JSON 调用延迟到 ready 事件。
“我已经尝试过 $(function (){ init(); }); 但不能让它工作”——它应该可以正常工作。您应该提供minimal reproducible example。我猜你把它放在你目前拥有init() 的地方以外的地方。请注意，拥有一个除了调用另一个函数之外什么都不做的函数是没有意义的，您可以只使用$(init)。
是的，我已经将 init() 包装在 document.ready 中。好吧，文档已经准备好了，但 json 还没有。当我询问 cfg 值时，我得到“未捕获的 ReferenceError：未定义 init”。函数 getJSONconfigdata() {...} | $(函数 () { 初始化 (); }); |函数 init(){ console.log(cfg.stem); }

标签： javascript jquery json document-ready

【解决方案1】：

是的，$(document).ready() 在 DOM 为 JS 准备好时运行。当许多人使用 jQuery 时，他们会将与页面元素交互的所有代码放在 $(document).ready() 语句中以确保这一点。所以

$( document ).ready(function() {
    var cfg;
    function getJSONconfigdata() {
        $.getJSON("/quizdata.json", function (json) {
            cfg = json;          
            //Now do everything else
            init();
        });
    }
    getJSONconfigdata()
});

【讨论】：

非常感谢，太好了。我一直在看它 - 获取 json 然后 dom - 在此函数之外准备好文档。 +1，但我太新了，无法投票！
我会做$(function() { $.getJSON("/quizdata.json", init) }) - 并有function init(json) { .... }
@mplungian 是的，这更优雅。做事的正确方法太多了。