DOM操作未按顺序执行

DOM Manipulation not executing in sequence

本文关键字：顺序 执行 操作 DOM      更新时间：2023-09-26

在下面的例子中寻找解决方案，甚至只是一些"幕后"理论。

DOM的操作似乎是以非阻塞的方式进行的。换句话说，不存在等待DOM语句执行的流控制。

在本例中：http://jsfiddle.net/qHVJX/

在onclick事件之后执行两个语句。

  1. 将文本从左向右移动

    document.getElementById('text').className = 'tr';

  2. 循环一段时间以停止执行。

    for(var i = 0,temp=1000000000; i<temp;i++){var dummy=0;}

如果在执行每个语句时流控制被阻止，那么正如预期的那样，文本将从左向右移动，然后从循环中短暂停顿。相反，文本移位发生在循环迭代之后。

这表明className语句在循环具有执行优先级时会进入队列。

在本例中：http://jsfiddle.net/qHVJX/1/

onclick事件后执行三个语句：

  1. 将文本从左向右移动

    document.getElementById('text').className = 'tr';

  2. 循环一段时间以停止执行。

    for(var i = 0,temp=1000000000; i<temp;i++){var dummy=0;}

  3. 将文本从右向左移动。

    document.getElementById('text').className = 'tl';

同样，如果在执行每个语句时流控制被阻止，那么正如预期的那样，文本将从左向右移动，然后在循环迭代时短暂停顿，然后文本从右向后移动。

相反，循环被执行，并且从左到右和从右到左的文本重新绘制从未发生。这说明了一种竞赛状态。

setTimeout（）可以暂停执行足够长的时间，让DOM语句完成它的任务，避免排队；没有办法知道每句话要花多长时间。如果间隔设置为短，则不会达到所需的结果。如果间隔设置得比需要的时间长，那么性能就会受到影响。

在没有setTimeout（）开销的情况下，是否可以在DOM操作期间阻止执行？也许是某种回调例程？

任何见解都将不胜感激。谢谢

我意识到这是一个老问题，但我想解释为什么循环会停止向右更改文本。

浏览器以每秒60次的最大速率刷新窗口。这将通过事件循环来完成，该循环还安排其他操作。首先，运行所有同步代码。然后，事件循环将经过延迟的操作；包括影响窗口重新绘制的那些（例如更改DOM元素中的类并应用样式）。

这就是这里正在发生的事情。当您触发该事件时，将首先执行同步代码。即：

1） 将tr作为类名分配给DOM元素数据（但不分配给显示的DOM本身。换句话说，如果您在dev工具上检查元素，则此时不会看到更改）。

2） 运行循环。

同步代码完成后，事件循环将看到还需要做什么。这里将重新喷漆。因此，此时您将看到开发工具上的元素获取tr类，文本向右移动。

安排此时要执行的操作的最佳方式是通过requestAnimationFrame（而不一定是setTimeout）。因此：

document.getElementById( 'text' ).className = 'tr';
requestAnimationFrame( () => {
  // ...
} );

我已经更改了你的代码，以更好地说明我所说的：

document.addEventListener( 'mousedown', shift_text, false );
function shift_text() {
    requestAnimationFrame( () => {
        console.log( 'requestAnimationFrame 1' )
    } );
    // execute before halt
    document.getElementById( 'text' ).className = 'tr';
    console.log( 'class name now is', document.getElementById('text').className );
    requestAnimationFrame( () => {
        console.log( 'requestAnimationFrame 2' )
    } );
    // halt with large loop
    for(var i = 0,temp=3000000000; i<temp;i++){var dummy=0;} 
    console.log( 'sync code is done' );
}

如果你运行这个，你会看到控制台打印将是：

class name now is tr // Despite the text still being on the left.
sync code is done // After a while due to the large loop.
requestAnimationFrame 1 // At this point, the text will be on the right.
requestAnimationFrame 2

澄清你的问题，每一句话都会被屏蔽。对requestAnimationFrame的每次调用都将在那时执行，但作为参数传递的回调是计划好的（不会立即执行）。这就是为什么文本在循环之前不会移动的原因。话虽如此，正如我的示例代码所示，classname赋值语句没有被调度，因为您可以看到数据更新，并且类名此时为tr。但这种变化的表现确实被推迟了。

关于三个语句的建议，如果在for循环之后有document.getElementById('text').className = 'tl';，由于这是同步代码，这将把类改回tl。因此，当重新绘制开始时，类名为tl。换句话说，您将类更改为tr，然后更改为tl，然后重新绘制，类为tl。我认为我的代码示例澄清了这一点，因为你可以看到第一个console.log会清楚地说类是tr。如果在渲染完成之前将该值更改回，则渲染可能永远不会使用该值。

希望这有助于澄清正在发生的事情！

另请参阅：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

不知道"setTimeout（）的开销"是什么意思，但用超时值0调用setTimeout似乎是常用的方法。

http://javascript.info/tutorial/events-and-timing-depth#the-settimeout-func-0-trick

settimeout是绝对正确的方式，如果它只是几毫秒的分辨率。

您的循环正在阻止浏览器更新。此外，循环处理所需的持续时间也是不可预测的。关于智能JavaScript编译器，如果循环没有任何好处，那么由于优化，循环可能会被省略。

相关文章：