jQuery not executing in correct order?

Question

I have recently started working with jQuery and today noticed a strange issue with how it\'s behaving for me. As I understand it, JavaScript is single threaded. So all of i

Answer 1

The operations are being executed in the same order that they are called, but the problem is that the DOM elements and what's shown on the screen are two separate things. The process that renders the elements to the screen runs in the same single threaded environment as the Javascript code, so it can't show any changes on the sceen until your script finishes.

To get the changes to show up, you have to end your script, and then resume it once the renderer has had a chance to show the changes.

You can use the setTimeout method to return control to the browser, and get the rest of the code to start as soon as possible:

$("#loadingIndicator").show();
$("#cases").hide();

window.setTimeout(function(){

  doSort(columnNumber);  //SORT
  $("#loadingIndicator").hide();
  $("#cases").show();

}, 0);