Ich habe eine Schaltfläche, die eine Langzeitfunktion ausführt, wenn sie angeklickt wird. Jetzt, während die Funktion ausgeführt wird, möchte ich den Schaltflächentext ändern, aber ich habe Probleme in einigen Browsern wie Firefox, IE.

html:

<button id="mybutt" class="buttonEnabled" onclick="longrunningfunction();"><span id="myspan">do some work</span></button>

Javascript:

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "doing some work";
    document.getElementById("mybutt").disabled = true;
    document.getElementById("mybutt").className = "buttonDisabled";

    //long running task here

    document.getElementById("myspan").innerHTML = "done";
}

Nun hat dies Probleme in Firefox und IE (in Chrom funktioniert es ok)

Also habe ich mir überlegt, es in ein Settimeout zu stecken:

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "doing some work";
    document.getElementById("mybutt").disabled = true;
    document.getElementById("mybutt").className = "buttonDisabled";

    setTimeout(function() {
        //long running task here
        document.getElementById("myspan").innerHTML = "done";
    }, 0);
}

Aber das funktioniert auch nicht für Firefox! Die Schaltfläche wird deaktiviert, ändert die Farbe (aufgrund der Anwendung des neuen CSS), aber der Text ändert sich nicht.

Ich muss die Zeit auf 50 ms anstatt nur auf 0 ms einstellen, damit es funktioniert (ändern Sie den Schaltflächentext). Jetzt finde ich das zumindest doof. Ich kann verstehen, ob es nur mit einer Verzögerung von 0 ms funktionieren würde, aber was würde in einem langsameren Computer passieren? vielleicht würde firefox da im settimeout 100ms brauchen? es klingt ziemlich dumm. Ich habe es oft versucht, 1 ms, 10 ms, 20 ms ... nein, es wird nicht aktualisiert. nur mit 50ms.

Also habe ich den Rat in diesem Thema befolgt:

Erzwingen einer DOM-Aktualisierung im Internet Explorer nach der Manipulation von JavaScript Dom

also habe ich versucht:

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "doing some work";
    var a = document.getElementById("mybutt").offsetTop; //force refresh

    //long running task here

    document.getElementById("myspan").innerHTML = "done";
}

aber es funktioniert nicht (FIREFOX 21). Dann habe ich versucht:

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "doing some work";
    document.getElementById("mybutt").disabled = true;
    document.getElementById("mybutt").className = "buttonDisabled";
    var a = document.getElementById("mybutt").offsetTop; //force refresh
    var b = document.getElementById("myspan").offsetTop; //force refresh
    var c = document.getElementById("mybutt").clientHeight; //force refresh
    var d = document.getElementById("myspan").clientHeight; //force refresh

    setTimeout(function() {
        //long running task here
        document.getElementById("myspan").innerHTML = "done";
    }, 0);
}

Ich habe sogar clientHeight anstelle von offsetTop ausprobiert, aber nichts. Das DOM wird nicht aktualisiert.

Kann jemand eine verlässliche Lösung anbieten, die möglichst nicht hacky ist?

Danke im Voraus!

wie hier vorgeschlagen habe ich auch versucht

$('#parentOfElementToBeRedrawn').hide().show();

umsonst

Erzwinge das erneute Zeichnen / Aktualisieren von DOM auf Chrome / Mac

TL; DR:

Auf der Suche nach einer ZUVERLÄSSIGEN browserübergreifenden Methode für eine erzwungene DOM-Aktualisierung OHNE setTimeout (bevorzugte Lösung aufgrund der unterschiedlichen Zeitintervalle, die abhängig von der Art des langen laufenden Codes, des Browsers, der Computergeschwindigkeit und von setTimeout benötigt werden, sind je nach Anforderung zwischen 50 und 100 ms erforderlich auf situation)

jsfiddle:http://jsfiddle.net/WsmUh/5/