Jquery 每个不按顺序对 json 数据进行排序 - Jquery each not sorting json data in order

我有一个脚本可以从 json 调用中获取数据，它工作正常。唯一的问题是，当使用jquery时，它是随机进入和显示的。mysql 查询很好，如果我"按 ASC 排序"或其他什么，则 json 代码输出正常column_name。

这是部分：

success: function(viddata) {
    $.each(viddata.videos, function(i, video){
        $.getJSON("https://www.googleapis.com/youtube/v3/videos", {
            key: "mykey",
            part: "snippet,contentDetails,statistics",
            id: video
        }, function(data) {
            var duration = convert_time(data.items[0].contentDetails.duration);
            var views = data.items[0].statistics.viewCount.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",");
            $(".bbox_content.bbox_videos .content_loader_container").remove(); 
            $(".bbox_content.bbox_videos").append($('<div class="bbox_item bbox_video_item" id='"' + video + ''"><a class="video_item youtube_video" name='"' + video + ''" href="/video/' + video + '" style="background-image:url('+ data.items[0].snippet.thumbnails.high.url +');"><span class="img"><img width="100%" src="/images/movie_arrow.png"/></span><span class="video_time">'+ duration +'</span></a>'+ viddata.controls +'<div class="bbox_video_item_info"><span class="video_title">'+ data.items[0].snippet.title +'</span><span class="view_count">Views: '+ views +'</span></div></div>').hide().fadeIn(800));
        });
    }

如何正确排序？有人可以给我看看吗？

谢谢！

getJSON进行 AJAX 调用以获取数据。AJAX 代表异步 Javascript 和 XML。这意味着，请求是按顺序发出的，正如您所期望的那样，但是，发出的第 2 个、第 3 个或第 n 个请求可能会在上一个请求完成之前返回。要测试这种情况是否发生在您身上，请在浏览器中打开开发人员控制台并查看网络活动（应该有一个过滤器来仅查看 XHR*。使用它）

解决方案是在上一个请求返回之前不发出请求，或者事先附加所有需要附加的div，并跟踪哪个请求填充了哪个div。

success: function(viddata) {
  $.each(viddata.videos, function(i, video) {
    var $videoDiv = $('<div id="' + video + '" style="display:none;"></div>').appendTo(".bbox_content.bbox_videos");
    $.getJSON("https://www.googleapis.com/youtube/v3/videos", {
        key: "mykey",
        part: "snippet,contentDetails,statistics",
        id: video
    }, function(data) {
        var duration = convert_time(data.items[0].contentDetails.duration);
        var views = data.items[0].statistics.viewCount.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",");
        $(".bbox_content.bbox_videos .content_loader_container").remove(); 
        $videoDiv.addClass('bbox_item bbox_video_item')
          .append('<a class="video_item youtube_video" '
           + ' name="' + video + '" '
           + ' href="/video/' + video + '" '
           + ' style="background-image:url('+ data.items[0].snippet.thumbnails.high.url +');">'
             + '<span class="img">'
               + '<img width="100%" src="/images/movie_arrow.png"/>'
             + '</span>'
             + '<span class="video_time">'+ duration +'</span>'
           + '</a>'
           + viddata.controls
           + '<div class="bbox_video_item_info">'
             + '<span class="video_title">'
               + data.items[0].snippet.title
             + '</span>'
             + '<span class="view_count">'
               + 'Views: '+ views
             + '</span>'
           + '</div>')
          .fadeIn(800);
    });
}

我可能在格式上有点过火了，但你必须承认，更容易看到发生了什么。

*XHR： XmlHttpRequest