我如何使用延迟对象和我的代码来存储返回变量的数据?

时间:2014-03-22 05:15:20

标签: javascript

我使用Jquery的$ .getJSON从服务器获取远程JSON。返回数据并将其存储在全局变量中。这个变量是全局的原因是因为我希望变量及其内部的数据是该函数之外的另一个变量的值。到目前为止,包含JSON数据的全局变量的变量,因为它的值,已被定义为" undefined"由于其余代码没有等待JSON。所以我认为延迟对象将有助于解决这个问题,但我对这个想法不熟悉。这是我的代码如下。如何使用延迟对象来允许我的代码等待JSON数据,然后使用包含JSON数据的全局变量在函数外部定义我的变量。

function getStuff(num, onContents){
$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://catholic.com/api-radio/' + num) + '&callback=?', function(data){
   //call the oncontents callback instead of returning
   onContents(data.contents);
});
}

//when calling getstuff, pass a function that tells what to do with the contents
getStuff(6387, function(contents){
window.GlobalVar = contents;
});

var NewVar = window.GlobalVar;
alert(NewVar);

1 个答案:

答案 0 :(得分:1)

很明显,在回顾我们的来信时,我们的通信中存在很多混淆。请允许我总结一下:

首先,您希望使用$ .getJSON调用的结果定义全局变量。你的代码已经这样做了。

getStuff(6387, function(contents){
    // the following statement will assign the value of 'contents' to the global variable 'GlobalVar'
    window.GlobalVar = contents;
});

我专注于您的代码段的最后两行,因为它们破坏了您的代码:

var NewVar = window.GlobalVar;
alert(NewVar);

这不起作用的原因是因为还没有定义window.GlobalVar。虽然分配window.GlobalVar的代码行的内容值在代码的最后两行之前,但这些行的评估不同步,因为$ .getJSON调用是异步(其中基本上意味着它有自己的时间表)。那么,window.GlobalVar = contents;当var NewVar = window.GlobalVar时,尚未执行。尝试 - 所以线路失败。

由于异步性,任何依赖于内容的代码都必须在<。em> $ .getJSON调用之后执行 - 这是您在提到“延迟”时在原始问题中暗示的内容。这就是为什么我敦促你将最后两行移到你的回调中。使用延迟与您使用回调实现的内容并没有本质上的不同 - 延迟只允许您附加多个回调以触发不同的事件。

我们最终确定您的问题特定于Angular JS - 也就是说,如何将ajax数据附加到$ scope。虽然使用延迟的jQuery对你没有帮助,但我认为使用Angular延迟意愿。你需要做的是用Angular的http服务中的jsonp方法替换jQuery的getJSON方法 - 这将允许你附加一个'success'处理程序,它将在你的ajax数据到达时更新$ scope(和你的视图):

function getStuff(num) {
    $http.jsonp('http://whateverorigin.org/get?url=' + encodeURIComponent('http://catholic.com/api-radio/' + num) + '&callback=JSON_CALLBACK')
        .success(function (contents) {
            $scope.shows = contents;
        });
};
getStuff(6387);

我们的ajax响应包含一个带有'contents'键的对象和一个json数据字符串的值,其中是我们想要的'shows'数据。我将修改.success处理程序,以便我们可以通过反序列化json字符串来获取'show'数据:

.success(function (response) {
    var result = angular.fromJson(response.contents);
    $scope.shows = result.shows;
});

接下来,在我们的Angular中,我们想迭代'shows'中的每个'show',我们可以使用ng-repeat指令来完成:

<ul>
    <li ng-repeat="show in shows">{{ show.title }}</li>
</ul>