javascript - jQuery datePicker 中的奇怪行为

Question

好吧，这有点奇怪，我很惊讶。我想知道是否有人知道这是预期的行为还是某些错误。

在 ASP.NET MVC 应用程序上，我将 jQuery 用于客户端事件。我有几个日期选择器，我尝试通过在日期选择器对象上使用 onSelect 属性来覆盖点击事件上的标准日颜色模式。

基本上，在 onSelect 上，我使用 AJAX 调用向服务器询问我想要以确定的颜色显示的日期并更改它们(通常在将点击的日期添加到“标记”日期列表之后)。

我的代码似乎并没有覆盖默认行为(当你点击某一天时，整天都会获得标准颜色并且你点击的那一天被突出显示)，它似乎在它之后执行(因此重绘状态和颜色在我想要的日期选择器上)。

令我惊讶的是，如果我使用 $.ajax 调用服务器，我的代码会在显示标准颜色模式的“默认行为”之前执行，但如果我使用 $.post，我的代码会在显示标准颜色模式之后执行覆盖标准颜色模式的“默认行为”。

下面是一些代码示例:

$("#diasNoLectivosHolder").datepicker({ 
    minDate: arrayNoLaborables[0], 
    maxDate: arrayNoLaborables[1],
    onSelect: function (fecha, calendar, event) {
        $.post($.url("Grupos/diaNoLaborable/" + $("#idGrupo").val() + "/" + fecha.replace(/\//g, ".")), function (xmlResponse) {
            if (xmlResponse)
                $.post($.url("Grupos/obtenerDiasNoLaborables/" + $("#idGrupo").val()), function (xmlDias) {
                    marcarNoLaborables(xmlDias);
                });
            $("#fechaInicio").change();
            return false;
        });
        return false;
    },
    onChangeMonthYear: function () {
        $.post($.url("Grupos/obtenerDiasNoLaborables/" + $("#idGrupo").val()), function (xmlResponse) { marcarNoLaborables(xmlResponse); });
    }
});

在这个例子中，点击任何一天后，日历会短暂闪烁到标准颜色模式，并完成显示我的 marcarNoLaborables(xmlDias); 的颜色模式。方法定义。

相反，如果我使用:

$("#diasNoLectivosHolder").datepicker({ 
    minDate: arrayNoLaborables[0], 
    maxDate: arrayNoLaborables[1],
    onSelect: function (fecha, calendar, event) {
        $.ajax({ 
            async: false,
            cache: false,
            url: $.url("Grupos/diaNoLaborable/" + $("#idGrupo").val() + "/" + fecha.replace(/\//g, ".")),
            success: function (xmlResponse) {
                if (xmlResponse)
                    $.ajax({ 
                        async: false,
                        cache: false,
                        url: $.url("Grupos/obtenerDiasNoLaborables/" + $("#idGrupo").val()),
                        success: function (xmlDias) {
                            marcarNoLaborables(xmlDias);
                        }
                    });
                $("#fechaInicio").change();
                return false;
            }
        });
        return false;
    },
    onChangeMonthYear: function () {
        $.post($.url("Grupos/obtenerDiasNoLaborables/" + $("#idGrupo").val()), function (xmlResponse) { marcarNoLaborables(xmlResponse); });
    }
});

日期选择器，在任何一天点击后，完成绘制“标准颜色模式”，如果我执行代码，我可以看到我修改的颜色模式适用，但在完成我的代码时，标准模式适用。

所以我的问题是...有人知道为什么 $.ajax 或 $.post 的使用会影响执行代码时遵守“默认日期选择器行为”的时刻吗？

如有任何我的解释不清楚的地方，请随时提出。英语不是我的母语，有时我发现很难解释清楚这样复杂的情况。

谢谢大家

Answer 1

代码在脚本中的不同点执行的原因是因为设置了“异步”选项。

默认情况下，“async”选项设置为 true，这意味着在生成 XHR 时不会阻止代码执行。通常这是需要的行为，因为您不希望在脚本调用服务器以获取更多数据时阻塞 UI 线程。

将“async”选项设置为 false 更改行为，以便您的脚本暂停，直到服务器做出响应。

我不确定您脚本的最终目标是什么，因此我无法就您应该做什么提出建议。但是您应该知道 $.post 方法只是 $.ajax 方法的简写，具有以下选项:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

因此，如果您的同步的阻塞行为是绝对需要的(不推荐)，您可以获得一个“POST”类型的 AJAX 请求，其中包含传递给 $.ajax 的相同选项。

希望这对您有所帮助。