javascript - Refresh DIV before heavy computation -

this keeps bugging me , although there's lot of "refresh div jquery" questions out there, none addresses (haven't found it, is) simple matter : how refresh (visual aspect) div before doing heavy lifting calculations? idea simple, i'm creating big chart d3 takes couple of seconds generate , want able put animated gif in overlay before computation , remove after. :

$("#test").empty(); $("#test").text("should seen while waiting"); (var i=1;i<2000000000;i++) {     //draw heavy svg in #test takes time } $("#test").empty(); $("#test").text("ready"); $("#test").css("color", "red"); 

simple, haven't been able far : "should seen while waiting" never appears :(

a simple fiddle here demonstrates behaviour : http://jsfiddle.net/stephmatte/q29gy/

i tried using settimeout , jquery's .delay() in 3 different browsers, no avail.

thanx input.

try this-

box = $("<div>", {'id': 'box'}); $("#test").append(box);  $("#box").text("should seen while waiting"); (var i=1;i<2000000000;i++) { //draw heavy svg in #test takes time } $("#box").remove(); $("#test").text("ready"); $("#test").css("color", "red");`