jquery - Show loading icon before the execution of a function -

i'm trying show loading icon before execution of function don't have clue how this.

my code:

$(".charttype").on("click", function(event){     $("#wrapper").addclass("loading");           changecharttype($(this).attr("value"));          $("#wrapper").removeclass("loading"); }); 

it shows loading icon (if removeclass() commented out) after chart has been loaded. if knows solution please let me now.

i've tried use settimeout(), jquery's when, , done nothing seems work.

i'm using google's visualization charts displaying various charts. i've got possibility switch between charts click on icon.

after function above executed.

the function changecharttype():

function changecharttype(typepar){     charttype = typepar;     chart = new google.visualization[charttype](chartdiv);     drawchart(); }    

and in drawchart calls chart.draw(); takes while , therefore want show loading icon.

the problem not removing loading icon showing loading icon adding class. adds class after chart has been drawn. maybe there ay synchronize this.

all 3 of functions synchronous. means run 1 after in short amount of time. asynchronous functions take time , have callback, can things after finish. example:

$(".charttype").on("click", function(event){    $("#wrapper").addclass("loading");          $("element").on("load",function(){       $("#wrapper").removeclass("loading");    });      }); 

"removeclass" function run after "element" loaded.