Fullcalendar异步加载事件源：能否先渲染已加载的数据源？

当然可以！这种场景在做数据驱动的UI时太常见了——核心就是别把两个请求的结果绑死在一起等待，而是让它们并行发起请求，各自加载完成后就立刻更新日历，不用等另一个接口返回。

1. 并行发起两个请求 #

不用等第一个接口返回再调用第二个，两个请求同时启动，最大化利用时间。

2. 独立处理每个请求的回调 #

每个接口返回数据后，直接调用日历的渲染/事件添加逻辑，快的数据源先渲染，慢的数据源加载完成后再补充进去。

3. 别忘了错误处理 #

给每个请求单独加错误捕获，避免其中一个接口失败导致整个日历无法正常展示。

假设你用的是自定义日历逻辑，核心代码大概是这样：

// 模拟两个接口请求
function fetchFastEvents() {
  return new Promise(resolve => setTimeout(() => {
    resolve([{ title: "团队周会", date: "2024-05-22" }]);
  }, 1000)); // 快接口1秒返回
}

function fetchSlowEvents() {
  return new Promise(resolve => setTimeout(() => {
    resolve([{ title: "客户拜访", date: "2024-05-23" }]);
  }, 3000)); // 慢接口3秒返回
}

// 初始化空日历框架
function renderEmptyCalendar() {
  console.log("渲染日历基础结构");
  // 这里是渲染日历容器、表头之类的基础逻辑
}

// 向日历添加事件
function addEventsToCalendar(events) {
  console.log("添加事件到日历:", events);
  // 替换成你的日历事件添加逻辑，比如插入DOM节点或调用日历库API
}

// 主流程
renderEmptyCalendar();

// 处理快接口
fetchFastEvents()
  .then(events => addEventsToCalendar(events))
  .catch(err => console.error("快接口加载失败:", err));

// 处理慢接口
fetchSlowEvents()
  .then(events => addEventsToCalendar(events))
  .catch(err => console.error("慢接口加载失败:", err));

如果用的是成熟的日历库，它们一般都支持动态添加事件源，不用自己写DOM操作：

// 初始化日历
const calendar = new FullCalendar.Calendar(document.getElementById("calendar"), {
  initialView: "dayGridMonth",
  // 其他日历配置...
});

// 先渲染空日历
calendar.render();

// 加载快数据源并添加
fetch("/fast-endpoint")
  .then(res => res.json())
  .then(events => calendar.addEventSource(events));

// 加载慢数据源并添加
fetch("/slow-endpoint")
  .then(res => res.json())
  .then(events => calendar.addEventSource(events));

这样用户打开页面后，先看到空日历，1秒后快接口的事件显示出来，再过2秒慢接口的事件自动补充进去，体验会比原来等待3秒才看到内容流畅很多~

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