$ .deferred не работает вовремя

Question

У меня проблема с тем, что я использую $ .deferred, чтобы получить данные в нужное время, когда моя функция вызвана. Я использовал пример из ответа, который у меня был раньше: Execution Time overlapse while AJAX JSONP Call

Теперь, когда я отлаживаю свой код, мои точки отладки в моей основной функции вызываются первыми, хотя отложенные должны получать данные тем временем. После этого отладчик в $ deferred.done начинает получать мои данные. Насколько хорошо, но данные не возвращаются за время, которое мне понадобится.

Вот список programmaticly из шагов:

1. Invoke компонент
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/