jQuery.when() 似乎没有在等待答案

【问题标题】：jQuery.when() doesn't seem to be waitingjQuery.when() 似乎没有在等待
【发布时间】：2017-03-10 14:14:55
【问题描述】：

当用户在 DOM 中执行某些操作时（单击复选框、选择下拉菜单等），我需要进行服务器端调用。这是一系列事件：

用户单击复选框（或其他内容）
微调器淡入，用户界面变得不可用
进行服务器端调用，并返回一些 JSON
使用 JSON 中的值更新 UI 中的标签
微调器淡出，用户界面再次可用

我遇到的问题是 4 和 5 经常颠倒，并且微调器有时会在标签更新前 2 或 3 秒淡出。

我正在尝试使用 .when() 来确保不会发生这种情况，但我似乎做得不对。我一直在看this thread，还有这个，还有jquery's own documentation。

这就是我现在所处的位置......

function UpdateCampaign() {
    $('#overlay').fadeIn();
    $.when(SaveCampaign()).done(function () {
        $('#overlay').fadeOut();
    });
}

function SaveCampaign() {
    var formData =
        .... // get some data
    $.ajax({
        url: '/xxxx/xxxx/SaveCampaign',
        type: 'GET',
        dataType: 'json', 
        data: { FormData: formData },
        success: function (data) {
            var obj = $.parseJSON(data);
            .... // update a label, set some hidden inputs, etc.
        },
        error: function (e) {
            console.log(e)
        }
    });
}

一切正常。执行服务器端方法，返回并解析正确的 JSON，并按预期更新标签。

我只需要那个该死的微调器等待并淡出，直到标签更新后。

【问题讨论】：

标签： javascript jquery json

【解决方案1】：

问题是因为你没有给$.when() 一个承诺。事实上你给它null所以它会立即执行。您可以通过返回 $.ajax 从您的 SaveCampaign() 函数提供的承诺来解决这个问题，如下所示：

function SaveCampaign() {
    var formData = // get some data

    return $.ajax({ // < note the 'return' here
        url: '/xxxx/xxxx/SaveCampaign',
        type: 'GET',
        dataType: 'json', 
        data: { FormData: formData },
        success: function (data) {
            var obj = $.parseJSON(data);
            // update a label, set some hidden inputs, etc.
        },
        error: function (e) {
            console.log(e)
        }
    });
}

【讨论】：

嘭！做到了！谢谢你。我会在 10 分钟后标记为答案。

【解决方案2】：

我知道 Rory 已经回答了。但是这是我的 promise 方法，它总是可以正常工作，而不是使用成功和错误，而是使用完成和失败

 var jqXhr = $.ajax({
    url: "/someurl",
    method: "GET",
    data: { 
      a: "a"
  });
//Promise method can be used to bind multiple callbacks
  if (someConditionIstrue) {
    jqXhr
    .done(function(data) {
      console.log('when condition is true', data);
    })
    .fail(function(xhr) {
      console.log('error callback for true condition', xhr);
    });
  } else {
    jqXhr.done(function(data){
      console.log('when condition is false', data);
    })
    .fail(function(xhr) {
      console.log('error callback for false condition', xhr);
    });
  }

或者如果我想要一个普通回调而不是条件回调，可以直接绑定在 if-else 块之外的 jqXhr 变量上。

 var jqXhr = $.ajax({
    url: "/someurl",
    method: "GET",
    data: { 
      a: "a"
  });

  jqXhr
  .done(function(data) {
    console.log('common callback', data);
  })
  .fail(function(xhr) {
    console.log('error common back', xhr);
  });

【讨论】：