我有一个按钮，当它被点击时会运行一个长时间运行的功能。现在，在函数运行时，我想更改按钮文本，但在 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），但文本没有改变。
我必须将时间设置为 50 毫秒而不是 0 毫秒，以使其正常工作（更改按钮文本）。现在我至少觉得这很愚蠢。我可以理解它是否可以仅以 0 毫秒的延迟工作，但是在较慢的计算机中会发生什么？也许firefox在settimeout中需要100ms？听起来很愚蠢。我试了很多次，1ms、10ms、20ms……不，它不会刷新它。只有 50 毫秒。
所以我遵循了这个主题的建议：
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";
}
但它不起作用（火狐 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);
}
我什至尝试了 clientHeight 而不是 offsetTop 但没有。DOM 不会被刷新。
有人可以提供一个可靠的解决方案，最好是非 hacky 吗？
提前致谢！
正如这里建议的那样，我也尝试过
$('#parentOfElementToBeRedrawn').hide().show();
无济于事
TL;博士：
寻找一种可靠的跨浏览器方法以在不使用 setTimeout 的情况下强制刷新 DOM（首选解决方案，因为需要不同的时间间隔，具体取决于长时间运行的代码类型、浏览器、计算机速度和 setTimeout 需要 50 到 100 毫秒，具体取决于根据情况）
jsfiddle：http: //jsfiddle.net/WsmUh/5/