事件没有正确排队

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 重绘事件（这是根据 highly voted SO answer）。由于我得到 ​​3 个事件，它们应该以适当的顺序执行，首先是“正在计算..”更新屏幕，然后是 long_running，然后是 calculation done。

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

Answer 1

点击回调执行如下：

1. $('#status_ok').text 设置为 'calculating....'
2. setTimeout 将您作为参数传递的函数设置在一边，以便在超时后执行它。
3. $('#status_ok').text 设置为 'calculation done'
4. 一秒钟过去了，传递给setTimeout的函数就会被执行

$('#status_ok').text('calculation done') 应该在setTimeout 函数中才能正常工作。