异步显示 flatpickr 中的占用情况，而不用请求淹没服务器

Question

我正在尝试通过 flatpickr 构建一个日历，它在月视图中显示占用情况。此日期选择器中的小点：

flatpickr 的文档说明了一种与 day-cell 交互的相当简单的方法，并在创建 day-cell 时添加一些元素或操作单元格：

...
onDayCreate: function(dObj, dStr, fp, dayElem){
    // Utilize dayElem.dateObj, which is the corresponding Date

    // dummy logic
    if (Math.random() < 0.15)
        dayElem.innerHTML += "<span class='event'></span>";

    else if (Math.random() > 0.85)
        dayElem.innerHTML += "<span class='event busy'></span>";
}
...

非常酷：此回调被调用每次创建单元格，因此每个视图调用 30|31 次。

入住率通过 API 公开，它采用单个日期或一组日期，returns 一个包含入住率信息的数组：

{
  '2018-04-19': 60,
  '2018-04-30': 21,
  ....
}

在 onDayCreate 事件中，我可以调用 API 并根据返回的结果采取行动。虽然这会创建 30/31 的请求，但它是可行的，但效率不高。

到目前为止一切顺利；但问题在于，如果您滚动查看月份，每个月都会向 API 生成 30/31 个请求。即使月份只显示几分之一秒。本质上我是在对我自己的服务器进行 DDOS 攻击。

我的下一个方法是在 1 个请求中预加载 'first' 月份，并使用 onDayCreate 事件从预加载的数组中挑选。

后续月份的占用将在 onMonthChange 事件中异步加载。但是，flatpickr 似乎触发了 onMonthChange-事件并继续创建日期：

红线以上：初始月份；下面我点了下个月。

所以我不能在onMonthChange中使用新加载的数据...

关于如何将占用信息动态加载到 flatpickr 中而不用（不必要的）请求使 API 过载的任何帮助

Answer 1

使用 Day-created 事件来创建像

这样的元素

`<span data-date="${yourDate}" class='loading event'></span>`

然后在 MonthChanged 事件中处理所有正在加载的元素和事件 class，从属性 data-date 的数组中查询所有日期。

异步显示 flatpickr 中的占用情况，而不用请求淹没服务器

Showing occupancy in flatpickr asynchronously without swamping server with requests

javascript

performance

datepicker

flatpickr