Problem mit Ajax Script

Hallo zusammen,

ich bin ein absoluter Neuling in Javascript und Ajax und habe mit einem Script ein Problem.

Ich möchte auf einer Webseite mit einem Button die Möglichkeit anbieten, ein Linux Shell Kommando auf dem Server auszuführen. Dieses Shell Kommando wird in der separaten PHP Seite run.php aufgeführt. Während das Kommando ausgeführt wird, soll mittels Ajax der ursprüngliche Button gegen ein drehendes Rad (spinner) ausgetauscht werden. Wenn das Ergebnis von der Seite run.php zurückgegeben wird, soll das Rad verschwinden und das Ergebnis angezeigt werden.

Einzeln für sich, funktioniert auch alles. Wenn ich aber alles zusammen in der Function laufen lasse, wird der Button leider erst gegen das Rad ausgetauscht, wenn das Ergebnis von der Shell da ist und dann verschwindet der Button bzw. das Rad sowieso. Das drehende Rad wird also nicht angezeigt.
Wie kann ich also das Element (spinner) schon vorab tauschen, ohne das die Function komplett durchlaufen ist.

Hier die Function:

function shellscript()
{
document.getElementById("zeichen").className ='fa fa-spinner fa-spin';
var result = "default";
result = $.ajax({
   type: 'POST',
   async: false,
   url: 'run.php',
// data: ({
// a: "",
// b: ""
//    })
}).responseText;
document.getElementById("ergebnis").innerHTML=result;
document.getElementById("zeichen").className ='';
}

Lasst Euch an dem auskommentierten Bereich nicht stören, da will ich später mit POST noch ein paar Werte übergeben.

Und hier der Aufruf:

<div onClick="shellscript()"><i id="zeichen" class='fa fa-share'></i></div>
<span id="ergebnis"></span>

Vielen Dank schon mal vorab.

Gruß
Carsten

Danke für das Feedbak. Hat leider nicht geholfen.
Ich hab es in Jquery übersetzt aber trotzdem wird die Class erst geändert, wenn das Ergebnis von run.php zurück ist.
Über Dr. Google habe ich auch noch beforeSend gefunden und eingebaut. Man sollte meinen, dass alles was in der beforeSend Function steht, schon vor dem Aufruf der run.php ausgeführt wird. Dem ist aber leider nicht so.
Momentan sieht das Script so aus:

function shellscript()
{
var result = "default";
result = $.ajax({
	beforeSend:function(){
		$("#zeichen").addClass('fa fa-spinner fa-spin');
	},	type: 'POST',
	async: false,
	url: 'run.php'}).responseText;
$("#ergebnis").html(result);
$("#zeichen").removeClass('fa fa-spinner fa-spin');
}

Habt ihr noch Ideen?
Falscher Zeilenumbruch. So ist es richtig:

function shellscript()
{
var result = "default";
result = $.ajax({
	beforeSend:function(){
		$("#zeichen").addClass('fa fa-spinner fa-spin');
	},	
	type: 'POST',
	async: false,
	url: 'run.php'}).responseText;
$("#ergebnis").html(result);
$("#zeichen").removeClass('fa fa-spinner fa-spin');
}