jquery - Changing cursor to a wait symbol while javascript function is running -

i know how change cursor wait symbol (hour glass/circle of death) doesn't register until after javascript done running. tried adding class html

in js

 $("html").addclass("waiting"); 

in css

 html.waiting  {     cursor:wait;  } 

and works said not until after js done running have code this

 $("html").addclass("waiting");  foobarfunctioncall();  $("html").removeclass("waiting"); 

is pretty worthless because turned off before turned on.

i have tried directly doing

 $("html").css("cursor", "wait"); 

which works not until after js done running other method does. worthless use well.

is there function call can have updates cursor property while js running register while js running?

other important/relevant info -> js shown above runs when div clicked using jquery , function in nested call function

 $(document).ready(function ()   {        $('.buttondiv').on('click',function()             {                 $("html").addclass("waiting");                 foobarfunctioncall();                 $("html").removeclass("waiting");             });  }     

note -> isn't actual code same method/concept other irrelevant stuff taken out simplicity/ less confusion.

anyone have solutions? function can take while (~10 seconds) depending upon button pressed why necessary.

i'm guessing it's because callback function there has way make work.

thanks appreciated!!

---

response comments

the add/remove class event in function call took out simplicity. think pa , halcyon right. repainting after java script i'm not sure how in java-script because don't have code paints anything. appending/removing/changing html elements or changing css properties/adding classes , done line of code doing executes why i'm confused. should wait cursor change does. project timeline dynamically updates reading file , function in question zoom in , out. none of inside svg element used body,ul,li,div,h4,p,br. i'm wondering if maybe body or html elements updated separately. think may because buttons change cursor finger pointer while on button , html thinks still on button until code executes i'm not sure because when u change cursor on html change cursor on every thing.

let me break down zoom function little: zoom function changes how far left justified timeline elements (the data, line, , scale) zooming out make left property smaller , zooming in make larger. time scale div's (time elements on actual line) removed , re-appended make such there x number on screen @ time. line's width changes. left property of data points popup divs (on click) changed. of effective inside function line (specific line related 1 small part of total display ex data point's left property being changed) executed.

@david - yeah agree work need other things interactive click functionality work properly. maybe should add small bit of text comes when loading changes occur , ignore whole cursor change.

okay tried loading text idea had , works when step through code in debugger not when i'm testing without stepping though. i'm guessing i'm trying isn't possible because going wait untill jquery calls done , change screen once complete trying 1 + -1 @ same time no change.

anyone know how can ask add stuff before completing function?

okay guys figured out how solve own problem. because using call jquery (

 $("div_button").on("click",function()       {            blahhh....       }); 

it isn't going update screen until call completes (unless stepping through in debugger reason) adding , removing same thing or setting cursor style setting different style undoing before displayed. trick getting work having separate call set loading settings first , removing them @ end of normal click/on-mouseup event call function (since click requires mouse , down run after);

so needed add separate handler see below

 $("div_button").on("mousedown",function()       {             setuploadingdisplay();       });  //note using .on("mousedown",setuploadingdisplay()); doesn't work reason   //     ->i guess it's not used call in case   // , have normal click or mouseup event handler   $("div_button").on("mouseup" [or "click"],function()       {             foobarfunctioncall();            removeloadingdisplay();       }); 

thanks help. know figured out myself ur input lead me there.