jQuery prepend() 和 JSON 的顺序错误

Posted 2023-04-13

【中文标题】jQuery prepend() 和 JSON 的顺序错误

【英文标题】：Wrong order with jQuery prepend() and JSON

【发布时间】：2015-05-23 14:59:58

【问题描述】：

我有这段代码来显示一些 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

【参考方案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();
    );
);

【讨论】：

哦，对了！仍然是 ajax 的菜鸟。不错的解决方法。 $.getJSON() 是“json”类型的 $.ajax() 的简写，而这个支持 'async: false' 参数，如果我为此使用 $.ajax ，它会起作用吗？不确定，因为 ir 是 JSONP，据我所知，JSONP 请求不能同步。我说的对吗？

@RicardoPedrosa：你说得对，JSONP 不能同步。但这没关系，因为同步请求无论如何都会导致糟糕的用户体验。 :-)

我尝试了代码，但由于某种原因并没有显示所有视频。我已经进行了这些更改，但认为它们不会影响您的解决方案： - 将 append() 更改为 html()，因为这将是每个 div 的唯一代码 - 将索引更改为 (index+1)，只是为了更好地了解视频数量知道为什么它不显示所有视频吗？您可以在原始问题的 URL 上查看实时代码。

@RicardoPedrosa：查看 Web 控制台。 :-) vimeo 抛出了很多错误，所以你永远不会得到这些视频。

实际上这也发生在旧代码中。可能是 Vimeo 的临时问题。还是不行？

【参考方案2】：

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