如何从JSON文件获取元素属性并在jQuery自定义函数中实现功能？

这个问题我太熟了，本质就是异步操作的执行顺序搞的鬼！$.getJSON是异步请求，它不会等数据返回就继续执行后面的代码，所以你调用$('#mydiv').createBox(options)的时候，options还没被赋值，自然没法正常工作。下面给你几个靠谱的解决办法：

方案1：把函数调用放在getJSON的回调里 #

这是最直接的解决方案，确保只有当JSON数据成功获取到之后，再执行自定义函数：

// 先定义自定义函数
$.fn.createBox = function(options) {
  this.width(options.width).height(options.height);
};

// 异步请求JSON，在回调里调用函数
$.getJSON("documents.json", function(data) {
  $('#mydiv').createBox(data); // 直接用返回的data，不用额外存到options变量
});

这样就完全避开了异步时机问题，数据到手后才会给元素设置属性。

方案2：用Promise + async/await（更现代的写法） #

如果你的项目环境支持ES6+语法，这种写法能让异步代码看起来像同步的，逻辑更清晰：

// 把getJSON封装成Promise
function fetchBoxOptions() {
  return new Promise((resolve, reject) => {
    $.getJSON("documents.json", resolve).fail(reject);
  });
}

// 自定义函数保持不变
$.fn.createBox = function(options) {
  this.width(options.width).height(options.height);
};

// 用async函数处理异步流程
async function initBox() {
  try {
    const options = await fetchBoxOptions();
    $('#mydiv').createBox(options);
  } catch (err) {
    console.error('加载配置文件失败:', err);
  }
}

// 启动初始化
initBox();

这种写法还能方便地处理请求失败的情况，避免报错影响后续代码。

方案3：让自定义函数兼容异步参数（灵活扩展） #

如果想让createBox函数本身更智能，可以修改它，让它既接受现成的配置对象，也能直接接受JSON文件的URL：

$.fn.createBox = function(optionsOrUrl) {
  const $elem = this;
  // 如果传入的是URL，先请求数据再设置属性
  if (typeof optionsOrUrl === 'string') {
    return $.getJSON(optionsOrUrl).then(data => {
      $elem.width(data.width).height(data.height);
      return $elem; // 保持jQuery链式调用的特性
    });
  } else {
    // 传入配置对象则直接同步设置
    $elem.width(optionsOrUrl.width).height(optionsOrUrl.height);
    return $elem;
  }
};

// 调用时直接传JSON文件路径就行
$('#mydiv').createBox("documents.json").then(() => {
  console.log('盒子属性已成功设置');
});

这种方式让函数的复用性更强，适配更多场景。

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