我有一个按钮，当它被点击时会运行一个长时间运行的功能。现在，在该功能运行时，我想更改按钮文本，但在某些浏览器（如 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？这听起来很愚蠢。我尝试了很多次，1 毫秒、10 毫秒、20 毫秒……不，它不会刷新它。只有 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";
}
但它不起作用（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);
}
我什至尝试过 clientHeight 而不是 offsetTop 但什么也没有。DOM 不会刷新。
有人可以提供一个可靠的解决方案，最好是非 hacky 吗？
提前致谢！
正如这里所建议的，我也尝试过
$('#parentOfElementToBeRedrawn').hide().show();
无济于事
特尔；博士：
寻找一种可靠的跨浏览器方法来在不使用 setTimeout 的情况下强制 DOM 刷新（由于需要不同的时间间隔，这取决于长时间运行的代码类型、浏览器、计算机速度和 setTimeout 需要 50 到 100 毫秒的首选解决方案，具体取决于情况）
jsfiddle：http : //jsfiddle.net/WsmUh/5/