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>

现在，当我点击按钮时，我完成了计算＆＃39;显示出来（＆＃39;计算...＆＃39;可能闪烁一两毫秒）。

据我所知，$('#do_ok').on内的这三个命令中的每一个都创建了一个单独的事件，两个用于更新DOM，一个用于setTimeout，在1秒后完成。对于jQuery DOM更新命令，DOM会立即更新，但是，它们也会创建DOM重绘事件，这些事件将照常处理（根据此highly voted SO answer）。由于我收到了3个事件，因此应该按照适当的顺序执行，首先是“计算...”＆＃39;更新屏幕，然后long_running，然后更新calculation done。

那么我为什么要完成计算呢＆＃39;在执行long_running之前？

Answer 1

点击回调执行如下：

$('#status_ok').text设置为'calculating....'
setTimeout将您传递的函数设置为参数，而不是在时间结束后执行它。
$('#status_ok').text设置为'calculation done'
当第二个传递时，传递给setTimeout的函数将被执行

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

事件没有正确排队

1 个答案: