【解決方法】すべての ajax asyc 呼び出しが終了するまでローダーを表示する

[ad_1]

やあ、
解決策がある場合は、次の問題を明確にしてください –
ASP.NET では、async=true で $.ajax を使用して、4 つの Web メソッドを並行して呼び出しています。ここで、ajax の利点を利用するために呼び出している関数が 4 つあると仮定します。

BindGridRecords();
BindNotifications();
BindProjectFiles();
BindFileCount();

それらはすべて、上記と同じ順序で呼び出されます。ローダーの gif 画像を使用して、ローダーを div のフルスクリーンで表示し、最初の関数を呼び出してそれを表示し、最後の関数で非表示にしました (最後の関数が関数は、非同期呼び出しの最初の関数の前に完了する場合があります)。今、私には方法がありません 上記の呼び出しがすべて完了するまでローダーイメージを表示する方法. どちらが先に完成しても構いません。

私が試したこと：

$.when() 関数を試してみましたが、同期で呼び出してパフォーマンスを低下させているようです。したがって、非同期呼び出しの目的は利用されません。

今のところ、私は async=false を使用しており、初期のものを完了した後に他の関数が開始するように関数を設定しています。しかし、時間がかかっています。

私もこれを試しましたが、他の呼び出しにも影響するため、完全には機能しません

$(document).ajaxStart(function() {
    $('#overlay').show();    
});

$(document).ajaxStop(function() {
    $('#overlay').hide();
});

解決策 1

この種の問題に対する適切な解決策を探しているなら、この種の問題を防ぐためにこの種のものを試してみるべきだと思います…

1. 一意のローダー ID を使用してページにローダーを設定し、その一意の ID を返す関数を作成します。
2. その一意のローダー ID でローダーを閉じる別の関数を作成します。
3. JavaScript での let & var 宣言に注意してください。

例えば

function initPageLoader(){
	//return random loaderId.
	let min = 100000, max = 999999;
	let randomLoaderId = "fullPageLoader" + ( Math.floor(Math.random() * (max - min + 1) ) + min) + "Id";
	let loader = $("<div>").addClass("fullpage-loading").attr({"id":randomLoaderId})
	$("body").prepend(loader);
	return randomLoaderId;
}

function hidePageLoader(loaderId){
	$("#"+loaderId).remove();
}

function getDataUsingAJAX(){
	let loaderID; // mandatory to declare loaderID variable with let.
	
	$.ajax({
		type : "POST",
		data : {data: JSON.stringify(formData)},
		URL : ".../save.html",
		dataType: 'JSON',
		beforeSend: function( xhr ) {
			loaderID = initPageLoader(); //init the loader.
        },
		success : function(res) {
			// callback(res);
		},
		error : function(xhr, status, errorThrown) {
			console.log(xhr, status, errorThrown);
		},
		complete:function(res){
			hidePageLoader(loaderID); //close the loader.
		}
	});
}