jQuery延遲：用於延遲函數返回，直到函數內的異步調用完成+獲取返回值

Question

如何才能正確使用jQuery延遲來延遲函數返回，直到函數內的異步調用完成+獲取返回值？

這是我目前的代碼：

function getFields(page)
{
  var dff = $.Deferred();
  result = {};
  $.ajax( //the async call
    {
      url: page,
      success:
        function (data)
        {
          //work out values for field1 & field 2 from data here
          result = 
          {
            'field1' : field1,
            'field2' : field2
          };
        },
      complete:
        function()
        {
          dff.resolve(result); //my attempt to return the result
        }
    }
  );
  return dff.promise();
}

我想要打印{“field1”：“value1”，“field2”：“value2”}

var result = getFields('http://something');
console.log(JSON.stringify(result)); 

但是，結果的值似乎是一個jQuery對象 - 所以我做錯了什么，但是什么？

謝謝！

---

PS對不起新手問題，我是deferreds的第一次使用者，所以我仍然掌握基本概念。

Answer 1

延遲返回getFields函數的唯一方法是將AJAX async屬性設置為false：

   var ajaxPromise = $.ajax(
    {
      url: page,
      async: false  // make the call synchronous
    }
  );

但jQuery文檔指出，這是從1.8開始不推薦使用的（即不鼓勵使用它）。

延遲不會使AJAX同步，相反，它們可以更容易地使用回調和異步方法。

從我所知道的你想要做的事情來看，做這樣的事情可能會更好：

function getFields(page)
{
  var ajaxPromise = $.ajax( //the async call
    {
      url: page
    }
  );

  var dff = $.Deferred();
  ajaxPromise.then(function(data){

    // Possibly access the loaded data in this function.
    var result = {
      'field1' : field1,
      'field2' : field2
    };

    // Notify listeners that the AJAX call completed successfully.
    dff.resolve(result);

  }, function(){
    // Something went wrong - notify listeners:
    dff.reject(/* possibly pass information about the error */);
  });

  return dff.promise();
}

然后像這樣使用promise對象：

var fieldPromise = getFields('http://something');
fieldPromise.done(function(result){
  console.log(JSON.stringify(result)); 
});

請注意， getFields立即返回Promise對象，但您必須等待承諾得到解決才能注銷結果。

Answer 2

這是延遲的基本思想：您返回了一個對象，您可以使用它來定義返回值返回時將被調用的函數。 所以你可以這樣做：

function getFields(page)
{
    return $.ajax(page);
}

然后你可以調用它並指定一個在XHR調用完成時調用的函數：

var jqXHR = getFields("/path/to/call");
jqXHR.done(function (data) { alert(JSON.stringify(data); });

該對象是可鏈接的，因此您可以這樣做：

getFields("/path/to/call")
    .done(function (data) { alert(JSON.stringify(data); });

請注意， $.ajax返回的jqXHR對象是與Deferred兼容的對象，因此您可以在http://api.jquery.com/category/deferred-object/上閱讀文檔。

我不確定你的示例代碼是什么意思（因為它實際上並沒有使用Ajax調用），但也許你的意思是這樣的：

function getFields()
{
    var df = $.Deferred();
    window.setTimeout(function () {
        df.resolve({field1: "value1", field2: "value2"});
    }, 1000);
    return df.promise();
}

getFields().done(function (data) { console.log(JSON.stringify(data)); });

這將在您運行它后立即打印您想要的值。