How to make the browser paint?

Question

suppose I have this client-side code:

var d=document.createElement('div');
d.style.position='absolute';
d.style.width='1em';
d.style.height='1em';
d.style.background='red';
document.body.appendChild(d);
for(var i=1e7;i;--i);

It creates a red square and counts down in a loop. Now I have to wait for the countdown to be ready before I see the red square. What is the best way to show the square before the countdown starts? I thought of executing the countdown after a Timeout:

setTimeout(function(){
    for(var i=1e7;i;--i);
},1);

Or is there a better way? I do not want to rebuild my code into WebWorkers. Only a simple way to show a message before I start some time consuming linear code.

My real life situation is that I have a huge calculation that takes some time and I want to display a message before it starts.

if you work with html5 you can use a worker for your calculation to do it asynchronously. — akonsu, Sep 19 '13 at 17:55
Where is this calculation taking place? Client or server-side? (as akonsu says, if it is client-side, you should use a worker) — Deblaton Jean-Philippe, Sep 19 '13 at 17:56
And what if a Worker is not possible, for instance because of the use of an API that also does screen updates? — Marco de Wit, Sep 19 '13 at 18:01
if you do not want to use workers, then split the work in to chunks. run each chunk in a `setInterval` callback function. the reason why your `div` does not appear is because you do not yield control to the browser before you enter the long calculation. if you do this calculation inside a timer callback then it will not have this effect. — akonsu, Sep 19 '13 at 18:03
Check [this collection of useful links](http://stackoverflow.com/a/10809905/1048572). Maybe we even find a dupe. — Bergi, Sep 19 '13 at 18:06
Is it just me ... I can't see any delay occuring? Are we talking a nanosecond type of delay here or what? I've always assumed that javascript completed one instruction before continuing to the next, in which case the square gets written to screen before the loop. What am I missing here? — Darren Crabb, Sep 19 '13 at 18:13
Here is a [jsfiddle](http://jsfiddle.net/uLETP/) that demonstrates this issue. — John S, Dec 29 '13 at 00:59

score 0 · Answer 1 · answered Sep 19 '13 at 18:03

0

If it's a large calculation it may lockup your browser, causing a very poor experience for your users. If that's the case, you may consider looking at doing the calculation in a webworker and posting the completed message back to the user.

http://www.html5rocks.com/en/tutorials/workers/basics/

More simply, you do something using setTimetout or setInterval and just have the message show by default: http://jsfiddle.net/ZHDY4/1/

We wait for the DOM to be ready, show the red box with the corresponding wait message.

$(document).ready(function() {
    var n = 99;
    $("#counter").html("Please Wait"); 

    // Some long calculation; the red box is showing
    var a = 0;
    for(var i = 0; i < 99999; ++i) {
        for(var j = 0; j < 9999; j++) {
            a++;
        }
    }

    var counter = setInterval(function() {
        $("#counter").html(n);
        n--;

        if(n <= 0) {
            clearInterval(counter);
        }

    }, 1000);
});

answered Sep 19 '13 at 18:03

Julio

2,261
4
30
56

1

This waits for the DOM to be ready. Then does the calculation. Then shows Please Wait for one second and finally counts down from 99 to 0. So it is not what I meant, as I want to see Please Wait BEFORE the calculation. – Marco de Wit Sep 20 '13 at 06:43
1

Er, no it doesn't. It sets the "Please Wait" before the calculation as the code clearly indicates. – Julio Sep 20 '13 at 13:48
1

Have you tried this yourself? I tried your code on Chrome 29 and Firefox24 and it behaves as I described. – Marco de Wit Sep 20 '13 at 14:13
I believe you're failing to communicate what it is you want then. The code clearly indicates that "Please Wait" is set before the calculation, not after (This is how JS works). If you want a progress bar, that's a different story, and not what you asked. But no, I haven't tried it. I had my team of infinite monkeys mash on keyboards and this one seemed to be most correct so I posted it... – Julio Sep 20 '13 at 14:36
1

The code indeed clearly indicates that "Please Wait" is set before the calculation. But that does not mean it is shown before the calculation. And that is what I want. – Marco de Wit Sep 20 '13 at 14:47
I still posit that you're incorrect, but whatever. Here's a method that guarantees the wait is set BEFORE the calculation: http://jsfiddle.net/ZHDY4/2/ If it still "doesn't work" then you need to figure out what you want and how best to delineate those needs. – Julio Sep 20 '13 at 14:53
1

When I press 'run' I have to wait a few seconds (I made the 9999 into 99999) for the calculation to be ready. Then I see Please Wait for one second and then the countdown. I want to see Please Wait immediately after I press 'run'. I understand from you that you have this happen. What browser are you using? – Marco de Wit Sep 20 '13 at 15:02

How to make the browser paint?

1 Answers1