Force Chrome to refresh display during javascript execution

Question

I have to create a jQuery Dynatree. With my JavaScript, I build the different nodes of this Dynatree as I go along. The JavaScript execution takes a certain time.

In Firefox, I get the result I want i.e. I see my Dynatree growing but in Chrome, I have to wait until the end of the JavaScript execution to see the final result. Before that I have only a blank page.

So do you know a way to force Chrome to refresh display during JavaScript execution?

Spitting the calculation in smaller blocks that are separated by setTimeout(function () { ... }, 5) may help. — Alex Netkachov, Feb 03 '13 at 14:07
I have already tried this possibility. In my for loop, for each node built, I put a setTimeout. But it does not change anything. — Johann, Feb 03 '13 at 14:22
Try hiding and then showing the element when you want to trigger a refresh, something like: $('#parentOfElementToBeRedrawn').hide().show(0); — talkol, Feb 03 '13 at 14:35

score 1 · Answer 1 · answered Feb 03 '13 at 14:51

I assume you're using a loop to generate the tree, thus create a function that runs a single step of the tree growth based on a variable passed being what would have been your counter in the loop. ei:

<script>

//  what you probably have now
//  for(var i=0;i<100;i++){
//      dosomething
//  };


function step(i){
    dosomething
    if(i<100){
        window.requestAnimationFrame(function(){step(i+1)});
    };
};
step(0);

</script>

You will have to make requestAnimationFrame cross browser like so.

window.requestAnimationFrame=(function(){
    return window.requestAnimationFrame     ||
        window.webkitRequestAnimationFrame  ||
        window.mozRequestAnimationFrame     ||
        window.oRequestAnimationFrame       ||
        window.msRequestAnimationFrame      ||
    function(callback){
        window.setTimeout(callback,1000/45);
    };
})();

But this should work and re-render the DOM after each time the program is run.

Force Chrome to refresh display during javascript execution

1 Answers1