javascript - How to make the cursor change in d3.js when I want? -

this question related basic javascript loading message while js processing completes

my main problem cursor not changed before 2 functions drawlegend() , display() called, changes after everthing has finnished. code below restore of cursor temporary commented out, hourglass, after has finnished.

how cursor change hourglass before slow functions called?

examplefunc() {    mini.append("text")     .text(series[i].name)     .attr("x",30)     .attr("y",(15+(15*i)))     .attr("stroke",(d3.rgb(192,192,192)))     .attr("fill",(d3.rgb(192,192,192)))     .attr("stroke-width",0)     .style("font-size","12px")     .attr("text-anchor","start")     .attr("id","legend")     .on('mouseup', legendclick); }  //===== legend clicked function legendclick() {    //--- mouse pos    var origin = d3.mouse(this);     //---  channel    var ch=math.floor((origin[1]-4)/15);     //--- toggle active state    if (series[ch].active==true)       series[ch].active=false;    else       series[ch].active=true;     settimeout(setcursor("wait"),5);             drawlegend();    display();    //settimeout(setcursor("default"),5); // temp removed see result @  }  //===== set cursor function setcursor(cursor) {   d3.select("body").style("cursor", cursor); } 

it known executing things in javascript, hangs application. means eventual output displayed on screen. thus, when change cursor "wait" , after execution "cursor", javascript hasn't changed it, because ui thread busy calculating things in functions "drawlegend" , "display". however, think when execute "drawlegend" , "display" asynchronous like

settimeout(function () {         drawlegend();         display();         setcursor("default"); }, 0); 

then things should go want to. let me know if works you.

extra info: on this slideshare (especially slide 5) explained problem is.