クリックすると長時間実行される機能を実行するボタンがあります。関数の実行中にボタンのテキストを変更したいのですが、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";
}
現在、これはfirefoxとIEで問題があります（chromeでは問題なく動作します）
だから私はそれをsettimeoutに入れることを考えました:
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);
}
しかし、これはFirefoxでも機能しません! ボタンは無効になり、色が変わります (新しい css の適用による) が、テキストは変わりません。
動作させるには、時間を 0ms ではなく 50ms に設定する必要があります (ボタンのテキストを変更します)。今では、少なくともこれはばかげていると思います。0 ミリ秒の遅延で動作するかどうかは理解できますが、低速のコンピューターではどうなるでしょうか? 多分Firefoxはsettimeoutで100ミリ秒を必要とするでしょうか？それはかなりばかげているように聞こえます。1ミリ秒、10ミリ秒、20ミリ秒と何度も試しました...いいえ、リフレッシュしません。50msのみ。
したがって、このトピックのアドバイスに従いました。
javascript dom 操作後に Internet Explorer で DOM を強制的に更新する
だから私は試しました：
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";
}
しかし、うまくいきません (FIREFOX 21)。それから私は試しました：
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);
}
私はoffsetTopの代わりにclientHeightを試しましたが、何もしませんでした。DOM は更新されません。
誰かが信頼できるソリューションをできれば非ハッキーに提供できますか?
前もって感謝します！
ここで提案されているように、私も試しました
$('#parentOfElementToBeRedrawn').hide().show();
無駄に
TL;DR:
setTimeout を使用せずに DOM を強制的に更新するための信頼性の高いクロスブラウザー メソッドを探しています (実行時間の長いコードの種類、ブラウザー、コンピューターの速度、および setTimeout に応じて 50 から 100 ミリ秒の範囲が必要になるため、必要な時間間隔が異なるため、推奨されるソリューションです)状況により）
jsfiddle: http://jsfiddle.net/WsmUh/5/