1

When the user presses a button, a text of millions of words gets reformatted by changing the stylesheet. This takes a few seconds. I want to show a div with the message Please Wait immediately after the user pressed the button. I know I can do this by changing the timesheet in a setTimeout function. But then I need to make the timeout big enough to ensure the message gets displayed. Is there another solution? So now I have got:

displayMessage();
setTimeout(changeStylesheet,100);
Pavlo
  • 43,301
  • 14
  • 77
  • 113
Marco de Wit
  • 2,686
  • 18
  • 22
  • 2
    What's within `changeStylesheet()`? Couldn't you optimise it? – Pavlo Sep 20 '13 at 07:45
  • The minimal timeout (about 4ms) should suffice to disrupt execution and allow reflow&redraw. Have you tried that (just pass `0`)? – Bergi Sep 20 '13 at 07:50
  • @Bergi on Firefox 23 I experience that even 10 is not always (sometimes it is!) long enough to let the reflow&redraw of displayMessage happen. – Marco de Wit Sep 20 '13 at 07:52
  • @Pavlo Maybe it can be optimised. But at what cost? For the coming demo and test round the message needs to work well. Maybe changeStylesheet needs to be changed later by others so I want to keep it simple. – Marco de Wit Sep 20 '13 at 07:56
  • Hm, sad. Then you can only [force a reflow](http://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation) (e.g. by reading `message.clientHeight`), and hope that it gets redrawn as well. – Bergi Sep 20 '13 at 07:57
  • @Bergi Now on Firefox 24 the forced reflow does not help. My best solution is to lower the timeout to 30. – Marco de Wit Sep 20 '13 at 08:06
  • Shouldn't your code be `displayMessage();changeStlyesheet();setTimeout(hideMessage,100);` ? Your code above is actually delaying the changeStylesheet code by 1/10th of a second.... – Mesh Sep 20 '13 at 09:37
  • 1
    @Adrian Without the timeout the message won't be displayed before the results of changeStylesheet are visible. The browser collects these two screen updates. With the timeout I broke the execution to let the browser display the message before we go on with changeStylesheet. I do not yet care about hiding the message again. – Marco de Wit Sep 20 '13 at 09:53

1 Answers1

0

Use the two events to orchestrate the changes , keyup and 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";
}
Mesh
  • 6,262
  • 5
  • 34
  • 53