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";
}

耗时的DOM涂料

1 个答案: