Javascript 异步显示FlatPicker中的占用情况,而不让服务器被请求淹没

Javascript 异步显示FlatPicker中的占用情况,而不让服务器被请求淹没,javascript,performance,datepicker,flatpickr,Javascript,Performance,Datepicker,Flatpickr,我正在尝试构建一个日历,通过它在月视图中显示入住率。这个日期选择器中的小点: FlatPicker的文档说明了一种与day单元格交互的非常简单的方法,并在创建day单元格时添加一些元素或操纵单元格: ... onDayCreate: function(dObj, dStr, fp, dayElem){ // Utilize dayElem.dateObj, which is the corresponding Date // dummy logic if (Math.

我正在尝试构建一个日历,通过它在月视图中显示入住率。这个日期选择器中的小点:

FlatPicker的文档说明了一种与day单元格交互的非常简单的方法,并在创建day单元格时添加一些元素或操纵单元格:

...
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>";
}
...
onDayCreate
-事件中,我可以调用API并根据返回的结果进行操作。虽然这会产生30/31个请求,但这是可行的,但效率不高

到目前为止还不错;但问题在于,如果滚动浏览月份,每个月都会生成30/31个对API的请求。即使这个月只显示了几分之一秒。本质上,我是在攻击我自己的服务器

我的下一个方法是预加载'first'month in 1 request,并使用
onDayCreate
-事件从预加载的数组中选择cherrypick

后续月份的占用率将异步加载到
onMonthChange
-事件中。但是,FlatPicker似乎触发了
onMonthChange
-事件,并继续进行日创建:


红线以上:起始月份;下面是我下个月点击的

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


关于如何在不使用(不必要的)请求重载API的情况下将占用信息动态加载到FlatPicker中的任何帮助

请使用Day created事件创建如下元素

`<span data-date="${yourDate}" class='loading event'></span>`
``
然后在MonthChanged事件内部处理正在加载的所有元素和事件类,从属性数据date数组中查询所有日期

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