フォームの非同期送信時にロードアニメーションを実装したい

前提・実現したいこと

フォームの送信ボタンを押すと非同期で情報を送信し、正しく送信できれば、サンクスページに遷移するお問合せフォームがあるのですが、
非同期処理中に時間がかかるのでロードアニメーションを実装したい

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

ロードアニメーションの実行タイミングがずれる

送信ボタンをクリックし、サンクスページに遷移するまで、また、エラーメッセージがアラートされるまでの間ローディングアニメーションを処理させたいのですが、下記では、アニメーションが表示されない、エラーがアラートされ、アラートを消した後にアニメーションが発火するといったタイミングになっています。

$(function() {
		var xhr = new XMLHttpRequest();
		var send_flag = false;
		xhr.onreadystatechange = function() {
      console.log('hi');
      
      console.log('hide');
			switch ( xhr.readyState ) {
			case 0:
				console.log( '未初期化' );
				break;
			case 1:
        　　　　　　　　　　　　$("#pageloader").fadeIn();
				console.log( '送信中' );
				break;
			case 2:
				console.log( '待ち' );
				break;
			case 3:
				console.log( '受信中:'+xhr.responseText.length+' bytes.');
				break;
			case 4:
				console.log('受信完了');
        
				_returnValues = JSON.parse(xhr.responseText);
				console.log(_returnValues);
				if(xhr.status == 200) {
					location.href = './complete.html';
				} else {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$("#pageloader").fadeOut();
					alert("エラーが発生しました。\n" + _returnValues.message);
				}
				break;
			}
		};



　　　　　　　　　　　　　　var data = JSON.stringify({
				companyName: document.getElementById('company').value,
				name: document.getElementById('name').value,
				email: document.getElementById('email').value,
				phoneNumber: document.getElementById('tel').value,
				desiredAmount: document.getElementById('price').value
			});
			console.log(data);
			xhr.open('POST','https://url', false );
			xhr.setRequestHeader( 'Content-Type', 'application/json' );
			xhr.send(data);
			return false;
		});
	});

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

$("#pageloader").fadeIn();でアニメーションを表示し
$("#pageloader").fadeOut();で終了しよとしています。

非同期処理中の良いタイミングでアニメーションが発火できるよう何かアドバイスをいただければ幸いです。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、非同期処理とのことなので下記のようにtrueにすべきです

xhr.open('POST','https://url', true );

これだけで、アニメーションもうまく動作するはずです

もしアニメーションの処理を長くしたい、もしくは同期処理のようなときは
前もって、アニメーションを起動させとくべきです。以下参考例。

js
1$(function() {
2   $("#pageloader").fadeIn();
3   setTimeout(function(){
4      //一連の処理を
5
6      //処理が終わるタイミングで
7      $("#pageloader").fadeOut();
8   },1000);//任意の時間
9});