$ .deferred没有及时工作

时间:2014-11-10 16:06:47

标签: jquery ajax asynchronous jsonp deferred

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

现在,当我调试我的代码时,我的main函数中的调试点首先被调用,尽管延迟应该同时获取数据。之后,$ deferred.done中的调试器启动,我得到了我的数据。虽然好,但数据不会在我需要的时候返回。

以下是程序化的步骤列表:

  1. 调用组件
  2. 启动AJAX调用(由于异步JSONP不会等到它完成)
  3. 尝试读取数据。未定义,因为呼叫尚未完成
  4. 返回空字符串
  5. 使用空数据呈现组件
  6. AJAX调用已完成,将数据返回到组件函数
  7. 组件返回数据,但没有任何反应,因为数据已经发送,其他组件已经呈现
  8. 这是我用来尝试延迟模式的示例代码:

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

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

1 个答案:

答案 0 :(得分:1)

为什么不使用load(带选择器)将其简化为两个附加的DIV:

$(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/