以异步方式显示flatpickr中的占用率，而不会使请求服务器淹没

Question

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

flatpickr的文档说明了与日间单元格交互的相当简单的方法，并在创建日期单元格时添加一些元素或操纵单元格：

...
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获取，该API接受一个或一组日期，并返回一个包含占用信息的数组：

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

在onDayCreate - 事件中，我可以调用API并根据返回的结果执行操作。虽然这会产生30/31的请求但是它可行，但效率不高。

到目前为止一切顺利;但问题在于，如果你滚动几个月，每个月都会产生30/31的API请求。即使这个月只显示了几分之一秒。基本上我是DDOSsing我自己的服务器。

我的下一个方法是在1个请求中预加载“第一个”月份并使用onDayCreate - 事件从预加载的数组中进行分析。

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

红线上方：初始月份;下面我点击下个月。

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

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

Answer 1

使用Day-created事件创建

等元素

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

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