Force element.innerHTML update before javascript sort call

Question

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.

Bobince's answer is spot on. As for best practices for connecting events, see PPK's quirksmode.org/js/introevents.html — Justin Johnson
– Justin Johnson, Commented May 8, 2010 at 21:12

bobince · Accepted Answer · 2010-05-08 21:04:03Z

4

You have to return control to the browser to let it update any changes on-screen. Use a timeout to ask it to return control to you.

function sortHugeArray(){
    document.getElementById("progress").innerHTML="Sorting...";
    setTimeout(function() {
        ...do huge sort ...
        ...render result...
        document.getElementById("progress").innerHTML=result;
    }, 0);
}

It's a bit questionable to be executing a script for ‘several seconds’, though. There should be a way to speed that up, or break the process into parts returning control with a timeout every so often to keep the page responsive.

answered May 8, 2010 at 21:04

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

happy.cze Over a year ago

OK, thank you. So there is no any other way than using setTimeout?

Collectives™ on Stack Overflow

Force element.innerHTML update before javascript sort call

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related