jQuery not executing in correct order?
<p>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 it's operations should run in a FIFO basis.  However, this did not appear to be the case for me.  Please consider the following.</p>

<p><strong>SETUP is as follows</strong></p>

<p>HTML:</p>

<p>3 divs</p>

<ul>
<li><p>div#1 => contains header elements which can be clicked to execute the sort function</p></li>
<li><p>div#2 => contains the data that needs to be sorted</p></li>
<li><p>div#3 => contains an basic .gif which is used to notify the user that some operation is being performed</p></li>
</ul>

<p>jQuery
- contains the sort function which does DOM manipulation.  Basically, it reads data from the HTML page, stores in a 2D array, and sorts the array. It then clears div#2 (data div) completely and rebuilds it, using data from the sorted array.</p>

<p><strong>EXECUTION was expected to be as follows</strong></p>

<ul>
<li>user clicks one of the headers to trigger the sort function</li>
<li>sort function hides div#2 and shows div#3</li>
<li>sort function is executed</li>
<li>once sorting is completed, div#2 (data div) is shown and div#3 is hidden</li>
</ul>

<p><strong>However, here is what appears to happen</strong></p>

<ul>
<li><p>user clicks the headers</p></li>
<li><p>sort occurs</p></li>
<li><p>hiding and showing of divs happens at the last step</p></li>
</ul>

<p>Initially, as I was not able to see any divs being shown/hide, I assumed that it was happening too fast for me to notice.  So I added a time delay to the .show() and .hide() functions of jQuery.  Once this was done, it was quite apparent that show and hide actions were being done at the very end.</p>

<p><strong>* SOLUTION *</strong>
After much searching, I managed to get this working as I expected by using jQuery .queue() and .dequeue() functions.  The achilles heel here was that I had to insert a 1 millisecond delay between each operation.  Then and only then was the browser able to hide/show divs as I wanted.  So the operations went something like this:</p>

<pre><code>    var theQueue = $({}); // jQuery on an empty object

theQueue.queue("testQueue",
                function( next) {
                    $("#loadingIndicator").show();
                    $("#cases").hide();
                    next();
                }
            );
theQueue.delay( 1, "testQueue" );

theQueue.queue("testQueue",
                function( next) {
                    doSort(columnNumber);  //SORT
                    next();
                }
            );
theQueue.delay( 1, "testQueue" );

theQueue.queue("testQueue",
                function( next) {
                    $("#loadingIndicator").hide();
                    $("#cases").show();
                    next();
                }
            );

theQueue.dequeue("testQueue");
</code></pre>

<p>}</p>

<p>I am certainly not an expert on the matter, but I would think that operations should be executing in the same order as they are called.  Is the browser not rendering in the correct order? Is jQuery changing order of operations to make things more efficient?  </p>

<p>While the "solution" does the job, I am not convinced that it is the best solution in this scenario.  Is there any other way to do this?  If needed, I can provide working code examples that will demonstrate the issue.  Thank you.</p>

<p>On a different note, I have noticed with large data sets, when user clicks on a header element to trigger sort, browser become unresponsive.  I realize it is executing the sort function, but I was hoping there would be a way to avoid this.  Any thoughts?</p>
