Многократная краска 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"; 
}