Estoy intentando cargar un mensaje de 'carga' al usuario antes de llamar a una función que requiere mucho tiempo en javascript.

HTML:

<p id='foo'>Foo</p>​

Javascript:

var foo = document.getElementById('foo');

function tellViewerLoading() {
  // Tell the user that loading is occuring.
  foo.innerHTML = 'loading...';   
}

function someActionThatTakesALongTime() {
  // Do some action that takes a long time.
  var i = 0;
  while(i < 100000) {i++; console.log(i);};
}

function domUpdateDelayExperiment() {
  tellViewerLoading();
  someActionThatTakesALongTime();
}

domUpdateDelayExperiment();

JSFiddle:http://jsfiddle.net/johnhoffman/xDRVF/

Lo que quiero que suceda es que el DOM se actualice inmediatamente despuéstellViewerLoading() se llama.

En cambio, lo que sucede es que el DOM parece actualizarse después desomeActionThatTakesALongTime() acaba de correr En ese momento, es inútil mostrar un mensaje de carga.

¿Cómo le digo a javascript que actualice inmediatamente el DOM después detellViewerLoading() ¿se llama?