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都运行异步（不等待代码完成其他操作）。在这里查看更多详细信息：

Asynchronous vs synchronous execution, what does it really mean?

Html5 Jquery Update在click事件上多次标记

1 个答案: