Oczekiwanie i działanie, gdy skończone

Witam.
Próbuję czekać na zakończenie działania pewnej funkcji która generuje dane. Wszystko jest zakryte czarną warstwą, która ma zostać odkryta, gdy tamta funkcja wygeneruje te dane. Na pewno skończy, a czas 1 do 3 sekund. Myślałem, że znalazłem rozwiązanie w internecie, ale:

document.getElementById("body").innerText = '';

function andThenThis() {
	console.log('a następnie'); // Linia C
	document.getElementById("body").innerText = 'Test'; // Linia B
}

function doThis(callback) {
	console.log('Najpierw,') // Linia A
	let nRnd=0;
	while (true){
		nRnd=Math.floor(Math.random()*2000+1);
		console.log(nRnd);
		if(nRnd<2) break;
	}
	callback()
}
doThis(andThenThis)

ten kod fajnie wyświetla w konsoli po zakończeniu "a następnie", ale wcześniej i tak pojawia się napis "Test"???? Mimo nie zakończenia losowania liczb.

Pozdrawiam
Głębicki

Konsola wyświetla informacje z opóźnieniem.
04:28:57.910 a następnie
Wyświetla się kilka sekund po czasie wykonania tego polecenia.

U mnie się to wykonuje natychmiast i nie mam żadnych opóźnień na konsoli. To na Firefox, a na Chrome to faktycznie coś dziwnie działa :>

Poza tym jeśli chcesz robić takie rzeczy to chyba lepiej będzie przerzucić robotę do web workera, bo nie będzie blokował głównego wątku.

Takie coś wymęczyłem. Chyba działa poprawnie.

	#cover {
		display: block; z-index: 10;
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
		background-color: black;
		color: white;
	}
	#forDraw {
	display: block;
	z-index: 0;
	margin: auto;
	width: 30%; height: 120px;
	background-color: grey;
	border: solid 1px black;
	color: white;
	}

let oCover=null;
let oForDraw=null;

function delCover() {
	oCover.innerText = 'Zaraz gotowe!';
	setTimeout(function() {
		oCover.remove();
	}, 1000)
}

function makeCover(callback) {
	oCover = document.createElement('div');
	oCover.id = 'cover';
	document.body.appendChild(oCover);
	oForDraw = document.createElement('div');
	oForDraw.id = 'forDraw';
	document.body.appendChild(oForDraw);
	oForDraw.innerHTML='Tutaj, pod spodem coś rysujemy!<br>I to czeka na użytkownika.';
	setTimeout(function() { // bez setTimout tylko: callback i to co długo działa wstawić tutaj i hula.
		callback()
		}, 1000) // Tu można regulować czas, że niby coś robi
}

setTimeout(function() {
	makeCover(delCover)
	}, 1000)

setTimout-y dodałem, aby za szybko się nie działo. W sumie to nie wiem jak sprawdzić czy działa prawidłowo. Może jakąś stronę pobrać do

Pozdrawiam
Radosław Głębicki