DOM在长时间运行的函数中的刷新

5 浏览
0 Comments

DOM在长时间运行的函数中的刷新

我有一个按钮，当点击它时会运行一个长时间运行的函数。现在，在函数运行时，我想要改变按钮的文本，但在一些浏览器如Firefox和IE中遇到了问题。

html:

javascript:

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "正在进行工作";
    document.getElementById("mybutt").disabled = true;
    document.getElementById("mybutt").className = "buttonDisabled";
    //长时间运行的任务在这里
    document.getElementById("myspan").innerHTML = "完成";
}

现在在Firefox和IE中存在问题（在Chrome中正常工作）。

所以我想把它放在一个setTimeout中：

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "正在进行工作";
    document.getElementById("mybutt").disabled = true;
    document.getElementById("mybutt").className = "buttonDisabled";
    setTimeout(function() {
        //长时间运行的任务在这里
        document.getElementById("myspan").innerHTML = "完成";
    }, 0);
}

但是这在Firefox中也不起作用！按钮被禁用，改变颜色（由于应用了新的CSS），但文本未更改。

我必须将时间设置为50ms，而不仅仅是0ms，才能使其工作（更改按钮文本）。现在我认为这至少是愚蠢的。我可以理解如果只有0ms的延迟它能工作，但在一台较慢的计算机上会发生什么？也许在那里Firefox需要100ms才能完成settimeout？听起来相当愚蠢。我尝试了很多次，1ms，10ms，20ms...不，它不会刷新。只有50ms才行。

所以我按照这个主题的建议：

Forcing a DOM refresh in Internet explorer after javascript dom manipulation

所以我试过了：

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "正在进行工作";
    var a = document.getElementById("mybutt").offsetTop; //强制刷新
    //长时间运行的任务在这里
    document.getElementById("myspan").innerHTML = "完成";
}

但它不起作用（FIREFOX 21）。然后我尝试了：

function longrunningfunction() {
    document.getElementById("myspan").innerHTML = "正在进行工作";
    document.getElementById("mybutt").disabled = true;
    document.getElementById("mybutt").className = "buttonDisabled";
    var a = document.getElementById("mybutt").offsetTop; //强制刷新
    var b = document.getElementById("myspan").offsetTop; //强制刷新
    var c = document.getElementById("mybutt").clientHeight; //强制刷新
    var d = document.getElementById("myspan").clientHeight; //强制刷新
    setTimeout(function() {
        //长时间运行的任务在这里
        document.getElementById("myspan").innerHTML = "完成";
    }, 0);
}

我甚至尝试了clientHeight而不是offsetTop，但没有效果。DOM没有刷新。

有人能提供一个可靠的解决方案，最好是非hacky的方法吗？

提前感谢！

如此建议我也尝试了

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

但无济于事

Force DOM redraw/refresh on Chrome/Mac

简而言之：

寻找一种可靠的跨浏览器方法来强制刷新DOM，而不使用setTimeout（由于不同类型的长时间运行代码，浏览器，计算机速度需要不同的时间间隔，而setTimeout根据情况需要50到100ms）。

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

0