javascript - jQuery updates DOM element and calculations simultaneously -

so have page on button click, image added embellishments after performing various calculations on meta-data stored data-attributes.

since calculations can take few seconds, want show overlay on image. do:

$(selectedimageid).addclass('loading'); //perform series of calculations here... $(selectedimageid).removeclass('loading').addclass('calculated-embellishments'); 

i imagine script first show loading overlay on image, perform lengthy calculations, replace overlay selected embellishment class. seems dom updated @ end such never see loading class, directly jumps plain image embellishment class after few seconds.

if add alert('test') before last line adds embellishment can see loading overlay on image, not otherwise.

how can make work way want to, explained above? pointers welcome!

what happens "lengthy calculations" make browser "hang" processing, not having chance re-paint image reflect newly added loading class.

then once calculations done, last instruction replaces loading class calculated-embellishments class, , browser has time re-paint. loading class gone.

you have @ least 3 workarounds let browser display loading class before calculations keep busy:

• use settimeout proposed @csum, bet on how time browser need before doing re-paint show image loading class. hence need "test" different timeout values, still without guarantee result depend on each client current performance (cpu, memory, current cpu load!).
• start calculations in callback of "load" event of overlay (if image). not sure if "load" event guarantee of image (overlay) being painted (shown on screen).
• use 2 nested requestanimationframe make sure @ least 1 re-paint has occured, before start calculations.