事件未正确排队

Events don't queue properly

本文关键字：排队 事件      更新时间：2023-09-26

我有这段代码 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 中的这 3 个命令中的每一个都会创建一个单独的事件，两个用于更新 DOM，一个用于 setTimeout，在 1 秒后完成。对于jQuery DOM更新命令，DOM会立即更新，但是，它们也会创建像往常一样处理的DOM重绘事件（这是根据这个高度投票的SO答案）。由于我得到 3 个事件，它们应该按适当的顺序执行，首先"计算."更新屏幕，然后long_running，然后calculation done。

那么，为什么我在执行long_running之前就完成了"计算"呢？

单击回调的执行方式如下：

  1. $('#status_ok').text设置为'calculating....'
  2. setTimeout将作为参数传递的函数设置为在时间结束后执行它。
  3. $('#status_ok').text设置为'calculation done'
  4. 当一秒钟过去时，传递给setTimeout的函数被执行

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

相关文章：