如何从其他函数调用带回调变量的函数？附JS代码疑问

没问题，我来帮你梳理这个问题～你现在的代码是个立即执行函数表达式（IIFE），只在页面加载时运行一次，把请求到的数据赋值给clientInformation，但这个逻辑被封装在IIFE内部了，没法从外部再次触发执行。核心解决方案就是把获取客户端信息的AJAX逻辑抽成一个独立的、可重复调用的函数，这样就能在其他函数里随时重新获取数据并更新变量了。

方案1：保留同步请求（贴合你的原代码） #

如果你暂时不想改动同步请求的逻辑，可以把AJAX代码提取成一个独立函数，这样就能在需要的时候调用它更新clientInformation：

// 定义可复用的获取函数
function getClientInformation() {
  let clientInfo = null;
  $.ajax({
    'async': false,
    'global': false,
    'cache': false,
    'url': stepp + 'json/dataFile.json?ver=' + Math.random(),
    'dataType': "json",
    'success': function(data) {
      clientInfo = data;
      // console.log('client collected', data);
    }
  });
  return clientInfo;
}

// 页面加载时初始化变量
let clientInformation = getClientInformation();

// 在任意其他函数里重新调用更新
function refreshClientData() {
  // 重新获取数据并更新变量
  clientInformation = getClientInformation();
  // 这里可以添加更新后的后续操作，比如渲染页面等
}

⚠️ 注意：同步AJAX请求会阻塞浏览器主线程，在请求完成前用户无法和页面交互，体验很差，而且现代浏览器已经开始限制某些场景下的同步AJAX调用，所以更推荐下面的异步方案。

方案2：改用异步请求（推荐） #

我们用Promise封装AJAX请求，这样既不会阻塞页面，也能灵活地重新获取数据：

// 用Promise封装异步获取逻辑
function fetchClientInformation() {
  return new Promise((resolve, reject) => {
    $.ajax({
      'async': true, // 改为异步模式
      'global': false,
      'cache': false,
      'url': stepp + 'json/dataFile.json?ver=' + Math.random(),
      'dataType': "json",
      'success': function(data) {
        resolve(data);
        // console.log('client collected', data);
      },
      'error': function(err) {
        reject(err); // 捕获请求失败的情况
      }
    });
  });
}

// 页面加载时初始化变量
let clientInformation;
fetchClientInformation().then(data => {
  clientInformation = data;
});

// 在其他函数里重新调用更新（用async/await写法，更直观）
async function refreshClientData() {
  try {
    // 重新获取最新数据
    const newClientData = await fetchClientInformation();
    // 更新全局变量
    clientInformation = newClientData;
    // 这里执行数据更新后的操作，比如重新渲染页面组件
  } catch (err) {
    console.error('获取客户端信息失败:', err);
  }
}

// 如果你不习惯async/await，也可以用传统的.then()链式调用
function anotherRefreshFunction() {
  fetchClientInformation()
    .then(newClientData => {
      clientInformation = newClientData;
      // 后续操作
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
}

这样修改后，你就可以在任何需要的函数里调用refreshClientData()（或者直接调用fetchClientInformation()并处理结果），来重新获取最新的客户端信息并更新clientInformation变量了。

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