Html5 Jquery在点击事件上多次更新标签答案

【问题标题】：Html5 Jquery Update labels several time on click eventHtml5 Jquery在点击事件上多次更新标签
【发布时间】：2015-11-06 21:41:08
【问题描述】：

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

我有一个带有点击事件功能的按钮 (#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();     
    });
});

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

有人可以帮助我吗？

【问题讨论】：

什么是sleep()方法？？？
函数睡眠（毫秒）{ var start = new Date().getTime(); for (var i = 0; i 毫秒) { break; } } }
睡眠功能只是为了模拟一些工作
Javascript 是单线程语言，你阻塞了没有时间更新的 UI。如果你想模拟一个 ajax 调用，也就是 btw async，那么你可以使用 setTimeout() 来代替

标签： javascript jquery html

【解决方案1】：

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

setTimeout(function(), delay)

这是我在小提琴上的代码：

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

我一开始试过这个：

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

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

我很难理解其中的原因。然后我把后面的改成6000就得到了结果。我相信这两个 setTimeout 都运行异步（不等待代码完成来做其他事情）。在这里查看更多详细信息：

Asynchronous vs synchronous execution, what does it really mean?

【讨论】：

也许我不清楚，但我的问题不在于睡眠或超时。我只是用它来模拟一些工作，仅此而已。我的问题是关于标签的更新。我没有“中间”更新。
@user5023028 再次阅读。我也提到了我和你的结果相同的原因