Jquery ui 敲除视图实例化JQuery Datepicker控件onSelect在JS完成执行之前不更新DOM

我有一个完全使用Knockout创建的页面。在其中一个模板中，单击链接将显示JQuery Datepicker控件以选择日期。选择日期后，将使用所选日期执行函数，并关闭日期选择器。这么多就行了

从某人选择日期到日期选择器关闭可能需要几秒钟的时间。这是由于一个名为LoadAppointTimeslots的函数需要同步运行，并且可能需要一段时间才能完成它的工作。为了解决这个问题，我希望出现一个DIV，向用户提供系统正在加载的反馈

问题是，直到loadAppointTimeslots函数执行之后，DIV才出现，此时DIV再次隐藏。我已经用几种方法尝试过setTimeout，但都不起作用

以下是违规代码：

var SchedulingViewModel = function () {
  var self = this;
  ...
  self.Date_OnClick = function () {
    var selectedDate;
    $("#calendarPopup").append('<div  id="datepicker" />');
    $("#datepicker").datepicker({
      dateformat: 'mm-dd-yy',
      changeMonth: true,
      changeYear: true,
      setDate: new Date(),
      minDate: 0,
      maxDate: self.SelectedRFVInterval() - 1,
      onSelect: function (datetext, inst) {
        selectedDate = datetext;
        $("#loading").show();
        self.LoadAppointmentTimeSlots(datetext);  // function within view model that                 uses $AJAX in sync mode to return time slot data
        $("#loading").hide();
        $('#calendarPopup').dialog('close');
      }
    });
  };
  ...
}

---

您遇到的困难是，show是异步执行的，而javascript是在单个线程中执行的，这意味着它们必须等待所有同步代码（如loadAppointTimeslot）完成

要获得所需的行为，请将show调用之后的所有内容放入show命令的回调中。这样，LoadAppointTimeslot在show调用完成之前不会执行。以下是如何：

// ... other code
$("#loading").show(function() {
    self.LoadAppointmentTimeSlots(datetext);  
    $("#loading").hide();
    $('#calendarPopup').dialog('close');
});

但是，最好将LoadAppointTimeslot中的ajax调用更改为异步，并将隐藏和对话框“关闭”调用移动到ajax调用的回调中。这允许javascript在等待LoadAppointTimeslot完成时继续执行其他操作。看起来可能更像这样：

// ... other code
$("#loading").show()
self.LoadAppointmentTimeSlots(datetext, function() {
    $("#loading").hide();
    $('#calendarPopup').dialog('close');
});
// ... more code


function LoadAppointmentTimeSlots(datetext, alwaysCallback) {
    // Prepare request details
    $.ajax( "/myendpoint?param=foo" )
      .done(function(data) { alert("success"); }) // do something with data 
      .fail(function() { alert("error"); })
      .always(alwaysCallback); // called on both success and failure of ajax call
}