HTML5 jQuery更新在点击事件中多次标记

Question

我尝试做的事情：单击一个按钮，睡眠，将标签更改为“运行”，睡眠，将标签更改为“确定”

我有一个带有单击事件功能的按钮（#runajax）。 我有一张带有标签的表：

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

但是我只能看到最终的更新，看不到标签的中间值。

有人可以帮助我吗？

Answer 1

我已经进行了一些研究，发现使用setTimeout是比睡眠更好的方法

setTimeout(function(), delay)

这是我的小提琴代码：

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

我最初尝试过此方法：

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

但遇到的问题与您相同：显示最后一个，而不显示中间）。

我有一些艰难的时间试图理解原因。 然后我将后面的一个更改为6000，然后得到了结果。 我相信两个setTimeout都异步运行（不必等待代码完成以完成其他任务）。 在这里查看更多详细信息：

异步与同步执行的真正含义是什么？