javascript - DOM only updating when debugging -

i ran in following issue. have built wrapper around function display loading progress bar , makes disappear after function executed. not display progress bar, except when set breakpoint @ execution of function foo.

i had bit of success running on progress onload event, not execute endloading.

function sleep(milliseconds) {     var start = new date().gettime();     (var = 0; < 1e7; i++) if ((new date().gettime() - start) > milliseconds) break; }  var progress = document.createelement('progress'); var fillelement = document.body;  function foo() {      console.log('foo start');      sleep(2000);     fillelement.innerhtml = 'bar';      console.log('foo end'); }  function startloading() {     console.log('start');     fillelement.innerhtml = '';     fillelement.appendchild(progress);      }  function endloading() {     console.log('end');     fillelement.removechild(progress); }  startloading();  foo(); // if debug point set here can see progress bar endloading(); 

function foo() {    console.log('foo start');    settimeout(function () {     fillelement.innerhtml = 'bar';      console.log('foo end');   }, 2000); } 

should equivalent of

function foo() {    console.log('foo start');    sleep(2000);   fillelement.innerhtml = 'bar';    console.log('foo end'); } 

and can chain operations

startloading(chain(foo, endloading));   function chain(x, y) {   return function () { x(y); } }  function foo(afterwards) {   console.log('foo start');   settimeout(     function () {       fillelement.innerhtml = 'bar';        console.log('foo end');       afterwards();     },     2000); } 

and similar continuation-passing transform on startloading. can futures can simplify of style of coding.