如何在函数加载执行后从另一个JS文件访问变量？

你遇到的核心问题是：JS文件中的数据是在**异步事件（load）**完成后才填充的，直接import或同步访问变量只会拿到初始的空值。下面是三种可靠的解决方案：

方案一：使用自定义事件传递数据 #

这是最灵活的方式，通过自定义事件通知HTML脚本数据已准备好。

修改JS文件（file.js） #

let data = [];
obj.addEventListener('load', function() {
  // 模拟填充数据
  data = ['示例数据1', '示例数据2'];
  
  // 触发自定义事件，将数据作为事件详情传递
  const dataReadyEvent = new CustomEvent('dataReady', { detail: data });
  document.dispatchEvent(dataReadyEvent);
});

修改HTML文件 #

<script src="{% static 'file.js' %}"></script>
<script>
  // 监听自定义事件，获取数据
  document.addEventListener('dataReady', function(e) {
    const loadedData = e.detail;
    console.log('加载完成的数据：', loadedData);
    // 在这里编写数据处理逻辑
  });
</script>

方案二：通过回调函数接收数据 #

在HTML中提前定义回调函数，JS文件加载完成后主动调用该函数传递数据。

修改HTML文件 #

<script>
  // 定义回调函数，用于接收JS传来的数据
  function onDataLoaded(loadedData) {
    console.log('加载完成的数据：', loadedData);
    // 处理逻辑
  }
</script>
<script src="{% static 'file.js' %}"></script>

修改JS文件（file.js） #

let data = [];
obj.addEventListener('load', function() {
  data = ['示例数据1', '示例数据2'];
  // 检查回调函数是否存在，避免报错
  if (typeof onDataLoaded === 'function') {
    onDataLoaded(data);
  }
});

方案三：使用Promise异步等待数据（现代JS方式） #

将数据加载过程包装成Promise，HTML中通过then或async/await等待数据就绪。

修改JS文件（file.js） #

// 导出一个Promise，resolve时返回加载完成的数据
export const dataPromise = new Promise((resolve) => {
  obj.addEventListener('load', function() {
    const data = ['示例数据1', '示例数据2'];
    resolve(data);
  });
});

修改HTML文件 #

<script type="module">
  import { dataPromise } from "{% static 'file.js' %}";
  
  // 方式1：使用then链式调用
  dataPromise.then(loadedData => {
    console.log('加载完成的数据：', loadedData);
    // 处理逻辑
  });

  // 方式2：使用async/await（更简洁）
  // (async function() {
  //   const loadedData = await dataPromise;
  //   console.log('加载完成的数据：', loadedData);
  // })();
</script>

为什么你之前的import方式失败？ #

你直接导出data变量时，导出的是初始空数组的引用，但后续在load事件中执行data = ...会替换整个数组的引用，导致HTML中import到的还是原来的空数组引用，无法获取新数据。而上面的方案都是基于异步通知机制，确保数据就绪后再进行访问。

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