jQuery prepend（）和JSON的顺序错误

我有这段代码来显示一些Vimeo视频链接

var videos = [72811417, 73540737, 81953800, 75087595, 98673436, 104431470, 106263756, 106286854, 108073907, 110731224, 120420600, 120914125, 127641455, 128529706];

    $.each(videos, function(index, videoid) {
        $.getJSON('http://www.vimeo.com/api/v2/video/' + videoid + '.json?callback=?', {format: "json"}, function(data) {
            $("#blocos-portefolio").prepend('<div class="portefolio-bloco video"><a class="fancybox-vimeo" href="http://player.vimeo.com/video/' + data[0].id +'?color=F05859&autoplay=1"><img class="thumb'+ (index+1) +'" src="' + data[0].thumbnail_large +'"><img class="video_overlay" src="imagens/video_overlay.png"><h3>' + data[0].title.replace("&"," + ").replace(/trailer|_trailer/gi, "").toUpperCase() + '</h3></a></div>');
        });

    });

但由于某些原因，显示顺序并不总是相同的。它应该以数组的相反顺序显示项目，但有时它只是将其像14 | 12 | 13而不是14 | 13 | 12一样混合。 知道为什么会这样吗？

---

您可以在这里看到实时代码：

可能是因为执行AJAX请求是一种异步操作。所以这很容易发生：

For loop with video id 1
get json for video 1
for loop with video id 2
get json for video 2
result json for video 2
result json for video 1

但由于某些原因，显示顺序并不总是相同的

这是因为ajax调用是异步的，它们不一定按照启动顺序完成

如果把它们整理好是很重要的，那么有十几种不同的方法可以做到这一点。例如，您可以在发出请求时为它们添加隐藏的div，然后在请求完成时更新div：

var videos = [72811417, 73540737, 81953800, 75087595, 98673436, 104431470, 106263756, 106286854, 108073907, 110731224, 120420600, 120914125, 127641455, 128529706];

$.each(videos, function(index, videoid) {
    $('<div class="portefolio-bloco video" data-index=' + index + '></div>').hide().prependTo("#blocos-portefolio");
    $.getJSON('http://www.vimeo.com/api/v2/video/' + videoid + '.json?callback=?', {format: "json"}, function(data) {
        $("#blocos-portefolio div[data-index=" + index + "]").append('<a class="fancybox-vimeo" href="http://player.vimeo.com/video/' + data[0].id +'?color=F05859&autoplay=1"><img class="thumb'+ (index+1) +'" src="' + data[0].thumbnail_large +'"><img class="video_overlay" src="imagens/video_overlay.png"><h3>' + data[0].title.replace("&"," + ").replace(/trailer|_trailer/gi, "").toUpperCase() + '</h3></a>').show();
    });
});

---

哦，对了！Stll是一个带有ajax的noob。很好的解决方法。由于$.getJSON是json类型的$.ajax的简写，而这个支持'async:false'参数，如果我使用$.ajax这个参数，它会工作吗？不确定，因为ir是一个JSONP，而且据我所知，JSONP请求不能是同步的。我说得对吗？@RicardoPedrosa:你说得对，JSONP不能同步。但这没关系，因为同步请求会导致糟糕的用户体验-我尝试了代码，但由于某些原因，并不是所有的视频都显示出来。我已经做了这些更改，但不认为它们影响了您的解决方案：-通过html更改了append，因为这将是每个div的唯一代码-按索引+1更改了索引，只是为了更好地了解视频的数量-知道为什么它不显示所有视频吗？您可以在原始问题的URL上查看实时代码。@RicardoPedrosa:在web控制台中查看。：-vimeo抛出了很多错误，所以你永远也看不到这些视频。事实上，这也发生在旧代码中。可能是Vimeo的暂时问题。还是不？