javascript - 耗时的 DOM 绘制

Question

当用户按下按钮时，数百万字的文本将通过更改样式表来重新格式化。这需要几秒钟。我想在用户按下按钮后立即显示带有消息“请稍候”的 div。我知道我可以通过更改 setTimeout 函数中的时间表来做到这一点。但随后我需要将超时设置得足够大以确保显示消息。还有其他解决方案吗？所以现在我得到了:

displayMessage();
setTimeout(changeStylesheet,100);

Answer 1

使用 keyup 和 keydown 这两个事件来协调更改。

http://jsfiddle.net/adrianjmartin/RB9Qz/11/

<style>
    div#msg { position:fixed;background:orange;top:0;height:auto;width:100% ;display:none}
</style>

<style id="styleA">

     div#msg { display:block}
    div{ width:100px;height:100px;background:red;margin:5px;}
</style>

<style id="styleB" >  
    div{background:orange;display:inline}
</style>

<div id="msg">Please Wait</div>

<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
<div id="b">b</div>
<div id="a">a</div>
//...etc...to slow it down!

Javascript

window.addEventListener( "showDialog" , function(){
 showMsg();
 });


document.addEventListener("keydown", function(){
  window.dispatchEvent( new CustomEvent("showDialog", {
    details:{ time:new Date() },
    bubbles: true,
    cancelable:true}));

  });

document.addEventListener("keyup", function(){
    changeStylesheet();
});

function showMsg(){
     var ss = document.getElementById("styleB");
    if(!ss.disabled){
        document.getElementById("msg").style.display="block";
    }

}

function changeStylesheet(){
   var ss = document.getElementById("styleB");
   ss.disabled = !ss.disabled;

    hideMsg();

}

function hideMsg(){
   document.getElementById("msg").style.display="none";
}