How to make jQuery functions run in order when a button is pressed?
<p>I have a <code>.click()</code> function that performs certain actions when a button is clicked. I want it to display a loading image, run some "stuff", then delete the loading image when the "stuff" is done. </p>

<p>Example of Javascript code:</p>

<pre><code>$("#button").click(
function(){
    shoeLoadingImage();
    /**************************************************************************
    *
    * other actions to be performed after showLoadingImage() is finished
    *
    **************************************************************************/
    //Whats below should only to be triggered after above actions above are finished
    hideLoadingImage();
}
 );
</code></pre>

<p>By using a couple of suggestions here I came up with a solution. It works, but I'm sure there is a better way to do this since my loading.gif is frozen when it is loaded. FYI: the other actions listed under <code>success: function(){}</code> contains some actions that take some time to complete which is the whole purpose of this loading image. </p>

<pre><code>$("#highlight").click(
function(){
    $.ajax({
        beforeSend: function(){ showLoadingImage(); },
        success: function(){
           /**************************************************************************
    *
    * other actions to be performed after showLoadingImage() is finished
    *
    **************************************************************************/

        },
        complete: function (){ hideLoadingImage(); }
    });
});
</code></pre>
