jQuery prepend() 和 JSON 的顺序错误

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 那样混合起来。知道为什么会这样吗？可以在这里看到实时代码：http://pedrofilipe.pt/videos.php

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

But for some reason the display order is not always the same.

那是因为 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 的顺序错误

Wrong order with jQuery prepend() and JSON

arrays

jquery

json

prepend