jszipを用いたダウンロードで、zip内のファイル名とデータが一致しない

Question

前提・実現したいこと

　ある条件で抽出された一覧の表に、チェックボックスが設けられており、別途設けたダウンロードボタンを押すと、
チェックボックスにチェックした複数の項目のpdfを、jszipを用いてzipファイルでダウンロードするシステムを作成しています。

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

　zipファイルにしてダウンロードするところまでは実現出来ているのですが、ダウンロードの１度目だけ、zipファイル内のファイル名と
実際のpdfデータがシャッフルされる(一致しない)という症状が起こっております。
　しかし、ダウンロード後に、そのまま再度ダウンロードボタンを押すと、pdfの内容とファイル名が一致してダウンロードされるように
なります。
　また、さらにその状態で、チェックボックスに新しくチェックを複数追加すると、それまでにチェックしたファイルは問題ないのですが、
追加したファイルのみシャッフルされてダウンロードされ、そのままもう一度ダウンロードボタンを押すと、全てのファイルが正しい名称で
ダウンロード出来るようになります。
　すべてが１回目で起こる為、原因が掴めずに困っております。
　よろしくお願いいたします。

該当のソースコード

function DLzip(){
	var urls=findElements("check"),
	pdfurls = new Array(),
	ii=0;

	for (var i=0; i<urls.length; i++){
		if (urls[i].checked){
				pdfurls[ii]=urls[i].value;
				ii++;
		}
	}
	batchDownload(pdfurls);
};

var batchDownload = function(urlList) {
	var zip = new JSZip(),
	ii=0,
	DLfilename="",
	deferreds = [];

	for (var i = 0; i < urlList.length; i += 1) {
		var deferred = downloadFile("../data/" + urlList[i] + ".pdf").done(function(xhr) {
			var DLfilename = urlList[ii] + ".pdf";
				ii++;
				zip.file(DLfilename, xhr.response);
			})
		deferreds.push(deferred);
	}

	$.when.apply($, deferreds).done(function() {
		zip.generateAsync({type:"blob"}).then(function (content) {
			saveAs(content,"DownloadFile.zip");
		});
	});
};

var downloadFile = function (url) {
	var xhr = new XMLHttpRequest(),
	deferred = new $.Deferred();

	xhr.addEventListener('load', function() {
		xhr.response;
		deferred.resolve(xhr);
	});
	xhr.open('GET', url, true);
	xhr.responseType = 'arraybuffer';
	xhr.send();
	return deferred.promise();
}

試したこと

• console.logなどを用いて実際にダウンロードするファイルの場所とファイル名が同じになるかの確認

　　⇒同一であることを確認

• ブラウザのキャッシュクリア

　　⇒改善されず

• zipファイルに格納されるファイルの順番

　　⇒チェックしてある上から順に読み取りを確認

• シャッフルされた際の法則性の確認

　　⇒特定できず

補足情報（FW/ツールのバージョンなど）

• 抽出方法は、inputタブにname="check"、value="(ファイル名)"を設定し、checkを設定したチェックボックスの中からcheckedに

一致するvalueの情報を読み取り、配列に格納させています。

• ダウンロードボタンを押すとDLzipが実行されるように設定しています。
• zipファイルの扱いも含め、ダウンロード系については全く知識がありませんでしたので、こちらの

サイトを参考にさせて頂いています。

• 使用しているブラウザはIEになりますが、Chromeでも確認したところ、同じ症状が起こっています。

Answer 1

ダウンロードが非同期処理のため、ダウンロードされる順番と、urlListの順番が一致することが担保されていないように見えるのですが、いかがですか？

Comments

[mr.aruru]

ご回答いただき、ありがとうございます。
お恥ずかしいのですが、今回初めて『非同期処理』という言葉を知り、いくつかのサイトを見てどういう意味なのかは理解できましたが、実際にどのように対応すればよいのかが見えておりません。
『記述の仕方で、非同期処理、同期処理になってしまう』『今回の場合は、同期処理で処理を行えばうまくいく』という認識でよろしいのでしょうか？
参考にしたソースを理解することも急務ではあるのですが、下記のサイトを参考に手を付けてみたのですが、どのように書き直せばいいのかが分かりません。
一部だけでも構いませんのでアドバイスを頂けますと幸いです。

https://blog.proglearn.com/2020/11/03/%e3%80%90js%e3%80%91%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e3%81%a8%e9%9d%9e%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e3%81%ae%e9%81%95%e3%81%84%e3%81%a8%e3%81%af%ef%bc%9f%e4%be%8b%e3%81%88%e8%a9%b1%e3%82%92/

[Lhankor_Mhy]

非同期処理とは、メインの処理と同期的ではなく行われる処理のことです。
ですので、
for (var i = 0; i < urlList.length; i += 1) {...}
のループが終わった時には、
downloadFile(...)の処理はひとつも終わっていません。

また、それぞれの downloadFile(...) も別々に行われるので、その処理が終わる順番が保証されないです。

---

つまりたとえば、
[a.pdf, b.pdf]
とあって、
a.pdfがすごく重いファイルでダウンロードに1分かかり、
b.pdfが軽いファイルでダウンロードに1秒しかかからない場合、
var DLfilename = urlList[ii] + ".pdf";
の処理は、b.pdf→a.pdfの順番で行われます。

しかし、iiは処理された順番で0→1と増えるので、urlList[0]→urlList[1]、つまり、a.pdf→b.pdfという順番で処理されているためにずれが起きているのではないか、と推測しています。

---

解決方法ですが、クロージャまたはスコープを試してみてはどうでしょうか。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures#creating_closures_in_loops_a_common_mistake

具体的には
for (let i = 0; i < urlList.length; i += 1) {
として、ii を使うのをやめるといいのではないかと思います。

[Lhankor_Mhy]

蛇足ですが、個人的に似たようなコードでブックマークレットを書いたことがあります。
ご参考になれば幸いです。

http://let.hatelabo.jp/Lhankor_Mhy/let/hLHX8qPqyax_

[mr.aruru]

お返事、遅くなりまして申し訳ございません。
丁寧にご回答頂き、ありがとうございます。
まずは、シャッフルされた状態で登録されてしまうという原因を理解することが出来ました。
まだ、動作するものは完成していませんが、あとは、紹介して頂いたリンクを参考にして勉強させて頂きます。
ありがとうございました！

[Lhankor_Mhy]

お役に立てたようで何よりです。