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

.show() and .hide() are members of the fx queue, which is executed asynchronously, without halting program execution.

Effects may be queued sequentially by chaining, but other code will execute independently of fx queue execution. The way to get the order of operations the way you want is to create a custom queue like you did, or use the callback functions for each effect.

E.g.

$('#loadingIndicator').show(250,function(){
    $('#cases').hide(250,function(){
        doSort(columnNumber);
    }).show(250, function(){
        $('#loadingIndicator').hide(250);})
});

JSFiddle example

ED: I accidentally the whole word.

Answer 2

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);