Progressbar: Force element.innerHTML update before javascript sort call
- by maras
Hi, what is the best practice for this scenario:
1) User clicks "Sort huge javascript array"
2) Browser shows "Sorting..." through element.innerHTML="Sorting"
3) Browser sorts huge javascript array (100% CPU for several seconds) while displaying "Sorting..." message.
4) Browser shows result.
Pseudo code:
...
<a href="#" onclick="sortHugeArray();return false">Sort huge array</a>
...
function sortHugeArray(){
document.getElementById("progress").innerHTML="Sorting...";
...do huge sort ...
...render result...
document.getElementById("progress").innerHTML=result;
}
When i do that this way, browser never shows "Sorting...", it freezes browser for several seconds and shows result without noticing user...
Thank you for advice.