相关疑难解决方法(0)

DOM刷新长时间运行的功能

我有一个按钮,当它被点击时会运行一个长时间运行的功能.现在,当函数运行时,我想更改按钮文本,但我在Firefox,IE等浏览器中遇到问题.

HTML:

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

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";
}
Run Code Online (Sandbox Code Playgroud)

现在这在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);
}
Run Code Online (Sandbox Code Playgroud)

但这对firefox也不起作用!按钮被禁用,更改颜色(由于新css的应用)但文本不会更改.

我必须将时间设置为50毫秒而不是仅仅0毫秒,以使其工作(更改按钮文本).现在我至少发现这个愚蠢.我可以理解它是否只能在0ms的延迟下工作,但在较慢的计算机中会发生什么?也许firefox在settimeout需要100ms?听起来很愚蠢.我尝试了很多次,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 …
Run Code Online (Sandbox Code Playgroud)

javascript firefox internet-explorer dom

24
推荐指数
3
解决办法
2万
查看次数

标签 统计

dom ×1

firefox ×1

internet-explorer ×1

javascript ×1