强制Chrome在javascript执行期间刷新显示

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 ie 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?

Answer 1

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.