PDF.jsを使用したサムネイルの作成について

実現したいこと

配列内に存在する全てのPDFファイルの1ページ目のみ抽出し、サムネイルのように表示したい

前提

PDF.js・非同期処理もあまり理解できていない初心者です。
こちらの質問回答　https://teratail.com/questions/197355
を参考にさせていただいてプログラムを書いてみました。

発生している問題・エラーメッセージ

上記サイトを参考にしてソース自体の実行はできサムネイルの作成をすることは可能になったのですが
サムネイルの順番が実際の配列内に存在するファイル順にならず難儀しております。
（ファイル処理各々の処理時間の違いにより順番が変わってしまっている？）

なんとかサムネイルの表示順をファイル配列と同じ順番で表示できるようにしたいです。

該当のソースコード

JavaScript

1for (var i = 0; i < dataList[listNo].fileNameList.length; i++) {2 3 filePath = dataList[listNo].dirPath + dataList[listNo].fileNameList[i];4 5 var loadingTask = pdfjsLib.getDocument(filePath);6 7 let arr = [];8 loadingTask.promise.then(function (pdf) {9 arr.push(10 pdf.getPage(1).then(function (page) {11 12 page_w = page._pageInfo.view[2];13 scale = 100 / page_w;14 var viewport = page.getViewport({ scale: scale });15 return Promise.all([viewport, page]);16 17 })18 );19 20 Promise.all(arr).then(function(resultArr){21 resultArr.forEach(x => {22 var canvas = document.createElement("canvas");23 var context = canvas.getContext("2d");24 canvas.width = x[0].width;25 canvas.height = x[0].height;26 27 var renderContext = {28 canvasContext: context,29 viewport: x[0],30 };31 32 var docIDName = "docID" + t;33 var pdfjs_target = document.getElementById(docIDName);34 t += 1;35 pdfjs_target.appendChild(canvas);36 x[1].render(renderContext);37 })38 });39 })40}