$.deferred没有及时工作

Question

我遇到的问题是，在调用函数时，我使用$.deferred在正确的时间获取数据。我在前面得到的答案中举了一个例子：Execution Time overlapse while AJAX JSONP Call

现在，当我对我的代码进行调试时，我的主函数中的调试点首先被调用，尽管延迟应该同时获得数据。之后，$deferred.done中的调试器启动，我得到数据。但数据不会在我需要的时候返回。

以下是步骤的程序列表：

1. 调用组件
2. 启动AJAX调用(因为异步JSONP而不能等到它完成)
3. 尝试读取数据。是未定义的，因为调用尚未完成。
4. 返回空字符串。
5. 组件正在使用空数据呈现。
6. AJAX调用完成后，将数据返回给组件函数。
7. 组件返回数据，但不会发生任何事情，因为数据已经发送，其他组件已经呈现。

这是我用来尝试延迟模式的示例代码：

function getReady() {
  var deferredReady = $.Deferred();
  $(document).ready(function() {
    deferredReady.resolve();
  });
  return deferredReady.promise();
}

var firstRequest = $.ajax({ url: 'http://www.html5rocks.com/en/tutorials/file/xhr2/' }),
    secondRequest = $.ajax({ url: 'http://www.html5rocks.com/en/tutorials/audio/scheduling/' });

$.when( getReady(), firstRequest, secondRequest
).done( function( readyResponse, firstResponse, secondResponse ) {
  var insertDiv1 = $('<div></div>');
  insertDiv1.html($(firstResponse[0]).find('section').html());
  var insertDiv2 = $('<div></div>');
  insertDiv2.html($(secondResponse[0]).find('section').html());
  $('body').append(insertDiv1, '<hr/>', insertDiv2);
});

这是我以前使用过的代码，但由于时间/执行问题而无法工作：

sap.designstudio.sdk.Component.subclass("component", function() {
var that = this;

this.processDataFromServer = function(){

    function getData(callback){
        $.ajax({
                url: path,
                dataType: 'jsonp',  
                contentType: "application/json",
                success: function(data){
                    callback(data);
                }
            });
    };
    getData(processData);    
    function processData(data){
        this.processDataFromServer(data);
    };
}
this.mainFunction = function(newValue){
  if(typeOf(newValue) == "undefined"{
    this.processDataFromServer();
  } else {
    return newValue;
  }
}
}

现在，我使用了延迟的示例来获得我的主函数接收数据并能够返回数据的正确时间。但失败了。:(

Answer 1

为什么不将load (带有选择器)简化到两个附加的DIVs中：

$(function () {
    var insertDiv1 = $('<div></div>');
    var insertDiv2 = $('<div></div>');
    $('body').append(insertDiv1, '<hr/>', insertDiv2);
    insertDiv1.load('http://www.html5rocks.com/en/tutorials/file/xhr2/ section:first');
    insertDiv2.load('http://www.html5rocks.com/en/tutorials/audio/scheduling/ section:first');
});

JSFiddle: http://jsfiddle.net/aL5v12mp/