我有一个按钮,当它被点击时会运行一个长时间运行的功能.现在,当函数运行时,我想更改按钮文本,但我在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)