javascript - 'spinner' does not appear right after call it -


i using js show 'spinner' waiting state when loading data. call showwaiting() show 'spinner' , hidewaiting() hide 'spinner' when data loading completed. 'spinner' not appear after calling showwaiting() expected, appears after data finished loading (loaddata1()). please me. thanks

below source code:

js source code:

this.showwaiting(); this.loaddata1(); this.hidewaiting(); this.function1();  showwaiting: function () {           $("#progressbar").css("display", "block");           $("#waiting_popup").show();           $("#progressbar").progressbar({               value: false           });       } 

html of spinner:

<div id="waiting_popup" style="z-index: 999999; position: relative;">         <div class="ui-widget-overlay ui-front"></div>         <div id="progressbar" style="width: 300px; margin: 18% auto; display:none;">             <div style="float: left;margin-left: 35%; margin-top: 5px;font-weight: bold;text-shadow: 1px 1px 0 #fff;">loading...</div>         </div>      </div> 

javascript strictly single threaded, there nothing happening in browser user interface long code running. have end function after showing spinner, , use timeout start loading after browser has had chance update interface:

this.showwaiting(); var th = this; window.settimeout(function(){   th.loaddata1();   th.hidewaiting();   th.function1(); }, 0); 

you should check if can make loading asynchronous. if spinner animated gif, won't move either long code running.


Comments

Popular posts from this blog

Java sticky instances of class com.mysql.jdbc.Field aggregating -