Question

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

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

我遇到的问题是4和5经常被反转，并且在标签更新之前，微调器有时会消失2或3秒。

我正在尝试使用.when（）来确保没有发生这种情况，但我似乎并没有做得对。我一直在关注this thread，以及jquery's own documentation。{/ p>

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

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，并按预期更新标签。

我只需要那个dang微调器等待并淡出，直到标签更新为止。

Answer 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)
        }
    });
}

Answer 2

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

 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);
  });

jQuery.when（）似乎没有等待

2 个答案: