Ajax で 2つ呼び出した処理が 1つ目が終わるまで 2つ目が返ってこない

Question

前提

複数の csv ファイルから DBに取り込む処理を作成していて、取り込みに時間がかかるため、途中経過を表示させるのに ajax を使う事にしました。いろいろ調べながら作っていくうち、壁に当たりました。

実現したいこと

下記の test.js（実際は php から出力）から test1.php を呼び出し、csv ファイルの取込処理中の途中経過進捗をファイルに書き込み（file_put_contents()を利用）ます。
test2.php は 1～2秒ごとに呼び出し、上記進捗ファイルを読み（file_get_contents()を利用）取って、クライアントに返します。（下記 test.js では、１回しか呼び出していません。）
そして、クライアントで途中経過を表示しようとしています。
実際には、以下の様な問題の為、0 % からいきなり 100% になってしまいます。
そもそもそういうものなのでしょうか？

発生している問題

test1.php を呼び出した後、すぐに test2.php が呼び出されるのは期待通りなのですが、test1.php は長く処理がかかり、test2.php は瞬間で終わる処理なのにもかかわらず、test1.php の処理が終わるまで、test2.php の応答がありません。
コンソールには、以下の様に表示されます。

step 1
step 3
<この間が数十秒かかる>
step 2
step 4

期待しているのは、以下の様な順番です。

step 1
step 3
step 4
<この間が数十秒かかる>
step 2

該当のソースコード

$(() => {
	console.log('step 1');
	$.ajax({
		url:'./test1.php',
		type:'POST',
		data:{
			'file': 'file1.csv',
		}
	})
	.done((data) => {
		//import が終わるまで帰ってこない。
		console.log('step 2');
	})
	console.log('step 3');
	$.ajax({
		url:'./test2.php',
		type:'GET',
	})
	.done((data) => {
		//瞬間で返ってくるはず
		console.log('step 4');
	})
});

試したこと

test1.php と test2.php の呼び出し順を変更して動かすと、以下の様なログになります。
ただし、test2.php 呼び出しの .done() 内で setTimeout() を使ってもう一度 test2.php を呼び出しても、test1.php の処理が終わるまで帰ってきません。

step 1
step 3
step 4
<この間が数十秒かかる>
step 2

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

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js を利用しています。

Answer 1

処理が遅いのは処理開始が遅い場合と、処理データが極端に大きい場合があります。
前者の場合はタイムアウトが発生しない限りひたすら待つしかありません
後者はXHRのprogressを利用すれば送られてきたデータをもとに経過表示が可能です

Comments

[lavino708]

ご回答ありがとうございます。
処理データが多くて、処理時間がかかっています。
文中にある進捗ファイルは途中経過が更新されています。
XHRのprogress で調べてみます。
ありがとうございました。

[yambejp]

ちょっと状況がわかりかねるのですが、経過確認用のファイルがあるのであれば
setIntervalでfetchを繰り返し、キャッシュを読まないように適当なパラメータをつけるとかですかね

[lavino708]

ありがとうございます。
setIntervall や setTimeout で設定した処理（例: test2.php）が、test1.php の処理が終わらない限り呼び出されないような状況です。
何か私が思い違いをしているのかもしれません。
改めて落ち着いて考えなおします。