Eu estou tentando carregar uma mensagem de 'carregamento' para o usuário antes de uma função de uso intensivo de tempo é chamada em 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/

O que eu quero que aconteça é que o DOM seja atualizado imediatamente apóstellViewerLoading() é chamado.

Em vez disso, o que acontece é que o DOM parece ser atualizado depoissomeActionThatTakesALongTime() termina em execução. Nesse ponto, é inútil exibir uma mensagem de carregamento.

Como faço para dizer ao javascript para atualizar imediatamente o DOM depoistellViewerLoading() é chamado?