jQuery.when（）似乎沒有等待

Question

當用戶在DOM中執行某些操作時，我需要進行服務器端調用（單擊復選框，選擇下拉列表等。這是一系列事件：

1. 用戶點擊復選框（或其他內容）
2. 微調器淡入，UI變得不可用
3. 進行服務器端調用，並獲取一些JSON
4. UI中的標簽使用JSON中的值進行更新
5. 微調器淡出，UI再次可用

我遇到的問題是4和5經常被反轉，並且在標簽更新之前，微調器有時會消失2或3秒。

我正在嘗試使用.when（）來確保沒有發生這種情況，但我似乎沒有做得對。 我一直在看這個帖子 ，這個和jquery自己的文檔 。

這就是我現在所處的位置......

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