javascript - DOM 操作未按顺序执行

Question

在我整理的以下示例中寻找解决方案，甚至只是寻找一些“幕后”理论。

看来 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 语句完成它的任务并避免排队；无法知道每条语句需要多长时间。如果间隔设置得太短，则无法达到预期的效果。如果间隔设置得比需要的时间长，那么性能就会受到影响。

有没有办法在 DOM 操作期间阻止执行而不需要 setTimeout() 的开销？也许是某种回调例程？

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

Answer 1

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

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

这就是这里发生的事情。当您触发事件时，同步代码将首先完成。即:

1) 将 tr 作为类名分配给 DOM 元素数据(但不分配给显示的 DOM 本身。换句话说，如果您在开发工具上检查元素，您将看不到此时的变化)。

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