jquery - 如果快速点击日历月，datePicker onMonthChange 和 beforeShowDay getJSON 请求无法跟上

Question

我会尽量简明扼要。

我设置了一个datePicker，用于住宿网站设置入住/退房日期。我使用 beforeShowDay 请求包含可用日期和费率的 XML 文件。我已完成此设置并且工作正常。

当月份更改时，我有一个 onMonthChange 函数来重新请求以下/上个月日期的信息，这也按预期工作，除了一个重要部分:

问题: 如果您快速单击月份，则返回的 XML 数据无法跟上，因此日期会错误地显示为不可用。

我需要执行以下操作之一:

• 数据加载后，日历就会刷新以显示正确的可用性
• 在数据加载之前，前一个月按钮将被禁用。

我尝试过的

• 在 onMonthChange 开始时隐藏月份更改按钮 函数然后在最后显示它 - 这是行不通的。
• 在 get 函数中使用 async:false - 我觉得这就是解决方案 但我无法让它工作，因为我找不到任何明确的文档 它应该去哪里。

代码:

        /* Date Picker */
    var datepickerOptions = {
        dateFormat: 'yy-mm-dd',
    };
    var checkInOptions = {
        showOtherMonths: false,
        minDate: 0,
        beforeShowDay: addPrice,
        onSelect: openCheckout,
        onChangeMonthYear: onMonthChange,
        dateFormat: 'yy-mm-dd'
    };

    j.getJSON("/availability.php?startDate="+year+"-0"+month+"-01&id="+j('#property_id').text(),
      { format: "json" },
      function(data) {
            document.pricesData = data;
            document.firstDate = '';
            j('#calendar_check_in').datepicker(checkInOptions);

            /* Tip Tip */
            j('.ui-datepicker-calendar td').tipTip({ defaultPosition: "right" });

            for (var key in document.pricesData) {
               var obj = document.pricesData[key];
               if(obj['avail'] == 1 && document.firstDate == ''){
                  document.firstDate = key;
               }
            }
            d = new Date(document.firstDate.substr(5));
            d.setMonth(d.getMonth()+1);

      });

function addPrice(date) {
    calDate = new Date(date);
    dateString = 'date_'+calDate.getFullYear()+'-'+('0'+(calDate.getMonth()+1).toString()).substr(-2)+'-'+('0'+(calDate.getDate()).toString()).substr(-2);
    if(document.pricesData[dateString] != undefined){
        var priceString = document.pricesData[dateString]['price'];
        if(document.pricesData[dateString]['avail'] == "1"){
            valid = true;
        } else {
            valid = false;
        }
    }else{
        var priceString = 'Price not available';
        valid = false;
    }
    return [valid, '', priceString];
}

function onMonthChange(year, month, inst){
    /* Date Picker */
    month--;
    j.getJSON("/availability.php?startDate="+year+"-0"+month+"-01&id="+j('#property_id').text(),
      { format: "json" },
      function(data) {
            document.pricesData = data;
            document.firstDate = '';
            /* Tip Tip */
            j('.ui-datepicker-calendar td').tipTip({ defaultPosition: "right" });

            for (var key in document.pricesData) {
               var obj = document.pricesData[key];
               if(obj['avail'] == 1 && document.firstDate == ''){
                  document.firstDate = key;
               }
            }
            d = new Date(document.firstDate.substr(5));
            d.setMonth(d.getMonth()+1);
      });
}

感谢所有花时间阅读本文的人，希望有人能找到某种解决方案，因为目前这有点令人困惑!

谢谢!

Answer 1

If you quickly click through the months the XML data coming back in can't keep up, so dates incorrectly show as unavailable.

当用户在日期选择器中更改月份时，您不能清除当前显示的定价和库存信息吗？这样至少不会显示错误的数据。然后，如果需要，您可以添加一些消息，通知用户其他数据仍在加载。

我强烈建议不要尝试使用 async:false。这就像核选择一样。它会对网站产生其他不利影响，并且听起来在您的情况下并不真正需要它。