Wyświetlanie elementu podczas wykonywania metody w sposób synchroniczny w ajaxie

Mamy oto taki kod:

$("#allBtn").off('click').click(function () {

		$("#loading").show();

		for (var i = 0; i < CheckBoxy.length; i++) {

			//operacje
			
			$.ajax({
				'async' : false,
				'url' : url,
				'data' : data,
				'dataType' : "json",
				'success' : function(data) {				
					//operacje
				}
			});
		}
}

I nie rozumiem dlaczego po wciśnięciu buttona nie zostaje wyświetlony element loading, choć teoretycznie powinien się wyświetlić i przysłonić na czas trwania pętli ekran. Próbowałem już chyba wszystkiego m.in. ustawiałem atrybut onLoading w ajaxie na $("#loading").show() i też to nie pomogło. Natomiast zostaje on wyświetlony dopiero w momencie zakończenia pętli, tak jakby coś go blokowało, ale nie mam pojęcie co to może być. Atrybut async w ajaxie musi być ustawiony na false. Macie jakieś pomysły o co może chodzić?

Spróbuj wymusić przerysowanie layoutu np. poprzez var h = $('body').height(); - jeżeli nie pomoże (bo rzadko pomaga, ale czasem jednak), to otocz tego fora w setTimeout(function() { /* tu kod */ },0); - to już na pewno da czas by przerenderować zmiany.
Async zawiesza jakiekolwiek działania w przeglądarce, więc jak z jakiegoś powodu przeglądarka nie robi sobie przerenderowania po show (a powinna) no to zostają takie kombinacje.

Atrybut async w ajaxie musi być ustawiony na false.

Nie musi ;) Nie znam żadnego przypadku, w którym musiałoby tak być. Zazwyczaj po prostu programista jest leniwy i nie chce mu się walczyć z callbackami.

Miej na uwadze też, że:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

Kiedyś takie wywołanie po prostu PRZESTANIE DZIAŁAĆ, już teraz oznaczone jest jako "deprecated", czyli "przestarzałe/do usunięcia". Także pamiętaj, że robisz to źle.

setTimeout też nie pomaga, bo próbowałem tego wcześniej, ale wypróbuje ten pierwszy sposób, może pomoże.

Nie napisałem tego wcześniej, ale po wciśnięciu tego buttona, zostaje wykonany kod zapisany w javie. Może właśnie przez element *loading *nie zostaje wyświetlony? W innym pliku, w którym też chcę wyświetlić ten element użycie *setTimeout *pomogło, ale gif który jest dołączony do loading się nie animuje. Także wydaję mi się że te problemy mogą wynikać z wykonywania kodu javy, jeśli tak rzeczywiście jest to jak sobie z tym poradzić?

Javy czy javascriptu? To dwa różne języki, więc nie rób zamieszania i bądź precyzyjny.

GIF NIE BĘDZIE DZIAŁAĆ! Inne skrypty będą zatrzymane. Właśnie na tym polega synchroniczny ajax, że CAŁA KARTA SIĘ ZAWIESZA, dopóki nie przyjdzie odpowiedź. Skoro twierdzisz, że to MUSI być tak zrobione to wydawało mi się, że masz świadomość tego, co robisz.