我怎樣才能阻止 jquery .append() 隨機化元素的順序？

Question

我有這個非常基本的腳本，它從 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的數組上調用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