style.display changing after Array Sort

Question

I want to display a simple loading message before a sort, but the display changes from none to block after the sort even though I call the sort after. I even tried using setTimeout (2 seconds) to change the display then call a dummy function to sort the stuff.

function sort(i) {
    document.getElementById("loading").style.display = "block";
    array.sort(function(a, b) {
        return a[i].localeCompare(b[i]);
    });
}

Answer 1

Browsers don't rush to repaint the page while JS is busy working (on the assumption that there will probably be other DOM changes that they should batch together for the repaint).

You'll need to free up the event loop to allow a repaint between your two statements.

Move the call to array.sort into a function and call it after a delay (e.g. with setTimeout or requestAnimationFrame).