如何在jQuery中读取外部JSON文件并确保数据加载完成后再执行后续脚本

下面是三种常用的适配不同场景的实现方式：

1. 回调函数方案（最简写法，适合轻量场景） #

直接把所有依赖JSON数据的逻辑放到$.getJSON的成功回调函数内，回调会在请求成功、数据解析完成后自动触发：

let jsonData; // 外层变量存储拿到的JSON数据
$.getJSON('./your-data.json', function (data) {
  jsonData = data;
  // 所有依赖jsonData的函数都在这里调用即可
  initApp();
  renderContent();
})

注意：不要在回调外调用依赖jsonData的函数，此时异步请求还未完成，变量还未被赋值

2. jQuery Deferred 链式调用方案（支持异常处理、多请求同步） #

$.getJSON本身返回jQuery Deferred对象，可以通过链式调用done/fail/always拆分逻辑，还可以配合$.when实现多个异步请求全部完成后再执行逻辑：

let jsonData;
// 发起请求
const jsonRequest = $.getJSON('./your-data.json');

// 处理请求成功逻辑
jsonRequest.done(function(data) {
  jsonData = data;
  // 执行依赖逻辑
}).fail(function() {
  // 自定义加载失败的兜底逻辑
  console.error('JSON文件加载失败，请检查路径');
});

// 多请求场景示例：等待两个JSON都加载完成再执行
const otherRequest = $.getJSON('./other-data.json');
$.when(jsonRequest, otherRequest).done(function(res1, res2) {
  const firstData = res1[0];
  const secondData = res2[0];
  // 两个请求都完成后执行逻辑
})

3. async/await 写法（适合复杂项目，逻辑更清晰） #

如果你的项目环境支持ES6+语法，可以把$.getJSON封装为Promise，用async/await写出类似同步执行的线性逻辑，避免多层回调嵌套：

// 封装请求为Promise
function getJsonData(url) {
  return new Promise((resolve, reject) => {
    $.getJSON(url)
      .done(resolve)
      .fail(reject)
  })
}

// 用自执行async函数包裹所有逻辑
(async function () {
  try {
    // 等待数据加载完成再往下执行
    const jsonData = await getJsonData('./your-data.json');
    // 后续所有依赖jsonData的逻辑都可以按顺序写在这里
    initApp(jsonData);
    renderContent(jsonData);
    // 其他业务逻辑...
  } catch (err) {
    console.error('数据加载失败:', err)
  }
})()

核心原则：所有依赖JSON数据的业务逻辑，必须放在请求完成后的回调/异步流程中触发，不要在请求发起后的同步代码里直接调用。

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