Как я могу остановить jquery .append () от рандомизации порядка элементов?

Question

У меня есть этот базовый c скрипт, который берет данные об изображении из URL и отображает информацию об изображении в li. Сценарий работает, и функция wallpaper вызывается около 10 раз, но каждый раз при перезагрузке страницы порядок элементов li меняется. Есть ли способ исправить это?

Вот сценарий, извините за грязный код:

//wallpaper info mainlist ------------------------------------------------------------------------------
function wallpaper(url){
var id1= url.replace("https://drive.google.com/file/d/", "");
var id= id1.replace("/view?usp=sharing", "");
var mainlink =    "https://drive.google.com/uc?id=";
var thumbnail =   "https://drive.google.com/thumbnail?id=";
var download =    "https://drive.google.com/uc?export=download&id=";

$.getJSON("https://www.googleapis.com/drive/v2/files/" + id + "?key=------", function (gotData) {
//-----------------------------------------------------------------------------------------------  

//calculate date---------------------------------------------------------------------------------
myDate =           new Date(gotData.createdDate.slice(0, 10));
var options =      { year: 'numeric', month: 'long', day: 'numeric' };
var name=          gotData.originalFilename.slice(0, -4);
var maindata=      'File Size: ' + bytesToSize(gotData.fileSize) + '<br><br><br><br>' + 'Upload Date: ' + myDate.toLocaleString("en-US", options) + '<br><br><br><br>' + 'Wallpaper Dimensions: ' + gotData.imageMediaMetadata.width + 'x' + gotData.imageMediaMetadata.height;

//append data---------------------------------------------------------------------------------------
$('.mainlist').append("<li><a href='"+mainlink+id+"' data-lightbox='wallpaper1'><img class='icon' src='"+thumbnail+id+"'></a ><span>"+name+"</span><img class='button1' src='/images/info.png'><a href='#'><img class='button2' src='/images/download.png'></a><ul class='dropmenu'><p>"+maindata+"</p></ul>");


//ajax request--------------------------------------------------------------------------------------
var http =        new XMLHttpRequest();
var links =       { main: mainlink + id, thumb: thumbnail + id, dnload: encodeURIComponent(download) + id };
var data =        { Size: 'FileSize: ' + bytesToSize(gotData.fileSize), UploadDate: 'Upload Date: ' + myDate.toLocaleString("en-US", options), WallpaperDimensions: 'Wallpaper Dimensions: ' + gotData.imageMediaMetadata.width + 'x' + gotData.imageMediaMetadata.height };
var name =        { wallname: name };
var datajson =    JSON.stringify(data);
var linksjson =   JSON.stringify(links);
var namejson =    JSON.stringify(name);

http.open("POST", 'walldb.php', true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onload = function () {

      if (this.status == 200) {
        //console.log(this.responseText)
      }
    }
    http.send("links=" + linksjson + "&data=" + datajson + "&name=" + namejson);
})
}



//mainlist---------------------------------------
wallpaper("https://drive.google.com/file/d/1a4mib5pVOGIzBTxjGmvVwx-0uvK2NqaR/view?usp=sharing");
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/11xvntovifR7x6888LUcCKKCVhijwuds4/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1JPN3uk5V_9z1i6RggiKFvAmX32Rz2uyC/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1XdbEAMkm08qVC6k7AV3iE6Z1_XCwRgLU/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1pgpRKV5GG2ANUec4QM5e0Lmo574vfRiM/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1XDKdp1weajeKZyg6ai-cr0b-PRnyJqJ1/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/17YReCJoHa9MYrDMYjrPlMC_3cWuO5pIw/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1zuX4j6FAEDyH0L-0RwhxCqh5Or8BY_9Z/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1_iTXhka08y2f1UQHTulBayakSp-Ogn4f/view?usp=sharing');
//-----------------------------------------------
wallpaper('https://drive.google.com/file/d/1KAwemGXYHVwwPoaH2kL2-4UwxNgh6jDz/view?usp=sharing');

Answer 1

Для метода Promise.all, поскольку вам нужен как объект ответа (вы называете его gotData) , так и что-то, связанное с URL, общая идея - вызвать .promise() для getJSON позвоните и приколите .then к нему, который перепаковывает ответ в данные и URL, который вам нужен. Затем вызовите Promise.all для массива этих Обещаний, и ответы будут проанализированы сразу после каждого из них:

function wallpaper(url) {
  var id1 = url.replace("https://drive.google.com/file/d/", "");
  var id = id1.replace("/view?usp=sharing", "");
  return $.getJSON("https://www.googleapis.com/drive/v2/files/" + id + "?key=------")
    .promise()
    .then(response => ({ response, id }));
}

Promise.all(
    wallpaper("https://drive.google.com/file/d/1a4mib5pVOGIzBTxjGmvVwx-0uvK2NqaR/view?usp=sharing"),
    wallpaper('https://drive.google.com/file/d/11xvntovifR7x6888LUcCKKCVhijwuds4/view?usp=sharing'),
    wallpaper('https://drive.google.com/file/d/1JPN3uk5V_9z1i6RggiKFvAmX32Rz2uyC/view?usp=sharing'),
    // ...
  )
  .then((arr) => {
    arr.forEach(processResponse);
  });

function processResponse({ response, id }) {
  var mainlink = "https://drive.google.com/uc?id=";
  var thumbnail = "https://drive.google.com/thumbnail?id=";
  var download = "https://drive.google.com/uc?export=download&id=";

  var myDate = new Date(gotData.createdDate.slice(0, 10));
  // etc