1

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

似乎对 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 操作期间阻止执行？也许某种回调例程？

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

4

3 回答 3

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。但这种变化的展示确实被推迟了。

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

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

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

于 2020-04-22T23:44:54.373 回答
0

如果它只是几毫秒的分辨率，setTimeout 也是绝对正确的方法。

您的循环只是阻止浏览器更新。此外，循环处理的持续时间也不是可预测的。关于智能 JavaScript 编译器，如果循环没有好处，则可以省略循环，因为优化。

于 2013-07-16T22:11:32.363 回答
0

不确定“setTimeout() 的开销”是什么意思，但调用 setTimeout 超时时间为 0 似乎是通常建议的执行此操作的方法。

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

于 2013-07-16T21:26:12.137 回答