Html5 Jquery Update labels several time on click event

Question

That I try to do : Click on a button, sleep, change the label to "Run", sleep , change the label "OK"

I have a button ( #runajax) with click event function. I have a table with label:

<table class="table table-bordered">
    <tbody>
        <tr>
            <td >Status Global </td>
            <td align="center"><label id="Status">FieldToUpdate</label></td>
        </tr>
    </tbody>
</table>

Javascript :

function setStatusRun(runType )
{
    $("#Status" + runType).text("running....");
}

function setStatusOK(runType )
{
    $("#Status" + runType).text("OK");
}

$(document).ready(function () {
    // initialize the viewer
    $('#runajax').click(function (event) {
        resetStatus();
        setStatusRun("");
        sleep(3000);
        setStatusOK("");
        sleep(3000);
        event.preventDefault();     
    });
});

But I can see only the final update, not the intermediate value of the label.

Someone can help me ?

Answer 1

I have done some research around and figure out using setTimeout is a better way than sleep

setTimeout(function(), delay)

This is my code on fiddle:

http://jsfiddle.net/mankinchi/0nubjp88/

I have tried this at first:

setTimeout(function() {
        setStatus("run");
    },3000);
setTimeout(function() {
        setStatus("stop");
    },3000);

but got the same problem as you have: showing the last one, not the middle).

I have some rough time trying to understand the reason why. Then I change the later one to 6000 and I got the result. I believe both of the setTimeout run async (doesn't wait for the code to complete to do others). Have a look here for more details:

Asynchronous vs synchronous execution, what does it really mean?