活动无法正确排队

Question

我有以下代码http://jsfiddle.net/ee1xuaqs/1/ ：

function long_running(status_div) { // does something for 2-3 seconds

    var result = 0;
    // Use 1000/700/300 limits in Chrome, 
    //    300/100/100 in IE8, 1000/500/200 in FF
    alert('running');
    for (var i = 0; i < 1000; i++) {
        for (var j = 0; j < 700; j++) {
            for (var k = 0; k < 300; k++) {
                result = result + i + j + k;
            } // end inner
        } // end outer for
    }

}

$('#do_ok').on('click', function () {
    $('#status_ok').text('calculating....');
    window.setTimeout(function (){ long_running('#status_ok') }, 1000);
    $('#status_ok').text('calclation done');
});

连同此HTML：

<table border=1>
    <tr><td><button id='do_ok'>Do long calc</button></td>
        <td><div id='status_ok'>Not Calculating yet.</div></td>
    </tr>
</table>

现在，当我单击该按钮时，我会显示“计算完成”（“计算中……”可能会闪烁一到两毫秒）。

据我所知， $('#do_ok').on的这三个命令中的每一个都会创建一个单独的事件，两个用于更新DOM，一个用于setTimeout，该事件在1秒后完成。 对于jQuery DOM更新命令，DOM将立即更新，但是，它们还会创建DOM重绘事件，该事件会像往常一样进行处理（这是根据投票率很高的SO答案 ）。 由于我得到了3个事件，因此应该以适当的顺序执行它们，首先是“ Calculating ..”更新屏幕，然后是long_running ，然后所有这些都calculation done 。

那么，为什么在执行long_running之前我得到“计算完成”？

Answer 1

click回调执行如下：

1. $('#status_ok').text设置为'calculating....'
2. setTimeout将您传递的函数设置为参数，以在超时后执行该函数。
3. $('#status_ok').text设置为'calculation done'
4. 一秒钟后，传递给setTimeout的函数将执行

$('#status_ok').text('calculation done')应该位于setTimeout函数内部，才能正常工作。