Javascript Hacker新闻API的异步问题
Javascript Hacker新闻API的异步问题
提问于 2014-11-16 20:09:50
黑客新闻最近发布了一个API接口，我用它来显示黑客新闻上当前排名前十的项目。我遇到了一些问题。
当我运行下面的代码时，frontpage上条目的顺序是不准确的，从frontpage中的第二个条目跳到第四个，跳到第一个、第五个、第三个，等等。再次运行代码会再次导致稍微不同的顺序。
$.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) {
var convoText = '<ol>';
for (var i = 0; i < 10; i++) {
(function(i) {
$.getJSON('https://hacker-news.firebaseio.com/v0/item/' + json[i] + '.json', function(json2) {
convoText += '<li><a href="' + json2.url + '">' + json2.title + '</a></li>';
if (i === 9) {
convoText += '</ol>';
addConvo(convoText);
}
});
})(i);
}
});我知道这是Javascript的异步特性的结果。我怎么才能修好它？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-16 20:20:14
为此，您可以使用jQueries $.when：
$.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) {
var requests = [];
for (var i = 0; i < 10; i++) {
requests.push($.getJSON('https://hacker-news.firebaseio.com/v0/item/' + json[i] + '.json'));
}
$.when.apply($, requests).done(function() {
var results = [].slice.call(arguments);
var list = results.map(function(arr) {
return '<li><a href="' + arr[0].url + '">' + arr[0].title + '</a></li>';
});
var convoText = '<ol>' + list.join('') + '</ol>';
console.log(convoText);
});
});Stack Overflow用户
发布于 2014-11-16 20:39:38
诀窍是在循环中同步创建和附加<li><a></a></li>结构--从而建立正确的顺序--然后在json2数据到达时异步地填充它。
$.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) {
var $ol = $('<ol/>').appendTo(...);//wherever
for (var i = 0; i < Math.min(json.length, 10); i++) {
(function(i) {
var $a = $('<li><a></a></li>').appendTo($ol).find('a');
$.getJSON('https://hacker-news.firebaseio.com/v0/item/' + json[i] + '.json', function(json2) {
$a.attr('href', json2.url).text(json2.title);
});
})(i);
}
});您必须完成.appendTo(...)行。我不知道<ol>...</ol>是在哪里附加的。
Stack Overflow用户
发布于 2014-11-16 20:42:59
有几种方法可以解决这个问题。最简单的方法是，不要附加到convoText中，而是使用数组，并在获得数据时设置它的索引。就像data[i] = json2;。然后，当获取所有数据时，加入您的数组。
一个更结构化的解决方法是重新架构您的循环，将其作为承诺的集合，并在它们都已解决后构建HTML ( @xat所指的是上面的内容)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26961508
复制相关文章
相似问题
腾讯云开发者
