Question

我有这段代码来显示一些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。知道为什么会这样吗？可以在此处查看实时代码：javadocs

Answer 1

可能因为执行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

Answer 2

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

这是因为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();
    });
});

使用jQuery prepend（）和JSON的错误顺序

2 个答案: