为何日历事件方块绘制函数先于Ajax数据加载执行？

核心问题出在Ajax的异步特性：你发起Ajax请求后立刻创建了Calendar实例，此时请求还在后台运行，data数组里还没有新增的事件数据，Calendar的渲染流程（包括你提到的事件方块绘制函数）自然会用旧的/空数组执行。等Ajax请求完成后数据才被push到数组，但这时候渲染已经结束了，不会自动重新执行。

两种可行的解决思路 #

思路1：等Ajax数据加载完成后再初始化Calendar #

把Calendar的创建逻辑放到Ajax的成功回调里，确保数据准备好后再启动渲染流程：

// 示例用fetch发起请求，也可替换为XMLHttpRequest
fetch('你的事件数据接口')
  .then(res => res.json())
  .then(newEvents => {
    // 将新数据合并到目标数组
    data.push(...newEvents);
    // 数据齐全后初始化日历
    const myCalendar = new Calendar({
      // 你的日历配置项
      data: data
    });
    // 若Calendar需要手动触发渲染，调用对应方法
    myCalendar.render();
  })
  .catch(err => console.log('数据加载出错:', err));

思路2：给Calendar类添加事件刷新方法 #

如果必须提前创建Calendar实例，可以给Calendar类新增手动刷新事件的方法，在Ajax完成后调用它重新渲染事件：
首先在Calendar类中扩展方法：

Calendar.prototype.refreshEvents = function() {
  // 步骤1：清空已存在的事件元素（根据你的DOM结构调整选择器）
  const eventSpans = document.querySelectorAll('.calendar-day span');
  eventSpans.forEach(span => span.remove());
  
  // 步骤2：重新调用事件渲染逻辑（复用你原有的renderEvents或相关函数）
  this.renderEvents();
};

然后在Ajax回调里触发刷新：

fetch('你的事件数据接口')
  .then(res => res.json())
  .then(newEvents => {
    data.push(...newEvents);
    // 调用刷新方法，重新渲染事件
    myCalendar.refreshEvents();
  });

关键注意点 #

• 异步操作不会阻塞后续代码执行，必须确保数据就绪后再执行依赖数据的渲染逻辑。
• 如果Calendar类本身没有提供刷新方法，需自行扩展，核心逻辑是先清除旧的事件元素，再重新遍历更新后的data数组生成新的事件方块。

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