JavaScript：如何等待第三方库加载完成后再执行代码并返回值

下面是几种适合新手的实现方式，确保inJump库加载完成后再执行你的代码：

方法一：回调函数（基础易懂） #

通过定时检查库是否全局可用，确认加载完成后触发目标逻辑：

// 封装等待库加载的函数
function waitForInJump(callback) {
  // 检查inJump是否已加载
  if (typeof inJump !== 'undefined') {
    callback();
  } else {
    // 每100毫秒重试一次，可按需调整间隔
    setTimeout(() => waitForInJump(callback), 100);
  }
}

// 原有业务函数保持不变
function geoLoc () {
  var loc = inJump.getGeolocationData();
  return loc;
}

function mainFunc (v1,v2) {
  var result = geoLoc();
  return result;
}

// 调用等待函数，库加载完成后执行逻辑
waitForInJump(() => {
  var myGeoLocation = mainFunc("val1","val2");
  // 这里可添加对地理位置数据的处理逻辑
  console.log(myGeoLocation);
});

方法二：Promise + async/await（现代写法） #

用Promise封装等待逻辑，配合async/await让代码更简洁易读：

// 封装返回Promise的等待函数
function waitForInJump() {
  return new Promise((resolve) => {
    const checkLib = () => {
      if (typeof inJump !== 'undefined') {
        resolve();
      } else {
        setTimeout(checkLib, 100);
      }
    };
    checkLib();
  });
}

// 修改geoLoc为异步函数，等待库加载完成
async function geoLoc () {
  await waitForInJump();
  return inJump.getGeolocationData();
}

// 修改mainFunc为异步函数
async function mainFunc (v1,v2) {
  var result = await geoLoc();
  return result;
}

// 执行并处理结果
mainFunc("val1","val2").then(myGeoLocation => {
  console.log(myGeoLocation);
});

方法三：监听库的加载完成事件（如果库支持） #

部分第三方库会在加载完成时触发自定义事件，若inJump提供该能力，可直接监听：

// 监听inJump加载完成的自定义事件（需确认库是否支持）
document.addEventListener('inJumpLoaded', () => {
  var myGeoLocation = mainFunc("val1","val2");
  console.log(myGeoLocation);
});

// 原有业务函数保持不变
function geoLoc () {
  var loc = inJump.getGeolocationData();
  return loc;
}

function mainFunc (v1,v2) {
  var result = geoLoc();
  return result;
}

注意事项 #

• 可根据实际需求调整定时检查的间隔，平衡性能与响应速度；
• 优先查看inJump官方文档，若有推荐的加载完成监听方式，这是最可靠的；
• 可给定时检查添加重试次数限制，避免无限等待。

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