setTimeout(fn,0) 在应用样式之前触发

Question

当我想在继续之前让我的 javascript 执行并允许浏览器应用样式等时，我倾向于使用setTimeout 的常用技术，延迟为0 让回调在队列中排队事件循环结束。但是，我遇到了一种情况，这似乎不能可靠地工作。

在下面的 sn-p 中，我有一个 active 类，它将转换应用于 chaser 元素。

当我将鼠标悬停在目标 div 上时，我想从 chaser 元素中删除 active 类，将 chaser 移动到新位置，然后重新应用 active 类。效果应该是o 应该立即消失，然后淡入它的新位置。相反，opacity 和 top 都应用了过渡，所以o 在不同位置滑动，大部分时间。

如果我将内部超时的延迟增加到10，它就会开始按我的预期运行。如果我将它设置为5，那么它有时会，有时不会。

我本来预计任何setTimeout 都会将我的回调排队，直到应用样式更新之后，但这里有一个明确的竞争条件。我错过了什么吗？有没有办法保证更新的顺序？

我在 macOS 和 Windows 上使用 Chrome 56，尚未测试其他浏览器。

（我知道我可以通过其他方式实现这一点，例如仅将转换应用于 opacity 属性 - 请考虑这是一个人为的示例来演示有关订购样式更新的特定问题）。

var targets = document.querySelectorAll('.target');
var chaser = document.querySelector('#chaser');
for (var i = 0; i < targets.length; i++) {
  targets[i].addEventListener('mouseenter', function(event) {
    chaser.className = '';
    setTimeout(function() {
      // at this point, I'm expecting no transition
      // to be active on the element
      chaser.style.top = event.target.offsetTop + "px";
      
      setTimeout(function() {
        // at this point, I'm expecting the element to
        // have finished moving to its new position

        chaser.className = 'active';
      }, 0);
    }, 0);
  });
}

#chaser {
  position: absolute;
  opacity: 0;
}
#chaser.active {
  transition: all 1s;
  opacity: 1;
}
.target {
  height: 30px;
  width: 30px;
  margin: 10px;
  background: #ddd;
}

<div id="chaser">o</div>
<div class="target">x</div>
<div class="target">x</div>
<div class="target">x</div>
<div class="target">x</div>
<div class="target">x</div>

Answer 1

在做任何其他事情之前，你需要听的是transitionend 事件。你可以阅读MDN about transitionend event。顺便说一句，setTimeout 永远不应该用来保证时间。

编辑：这是在 OP 澄清后供参考。每当元素发生样式更改时，都会进行重排和/或重绘。你可以read more about them here。如果第二次 setTimeout 在第一次回流之前运行，那么您将获得滑动效果。 10ms 之所以会达到预期效果是因为.active 类是在offsetTop 属性调整后添加的（导致transition 属性在元素更改为offsetTop 后应用）。通常，有 60 fps（即：每帧约 16 毫秒），这意味着在应用新样式之前您有 16 毫秒的窗口可以做任何事情。这就是为什么 5ms 的小延迟有时会导致不同的结果。

TL:DR - 浏览器每 16 毫秒询问 JS 和 CSS 是否有任何更新，并计算要绘制的内容。如果你错过了 16 毫秒的窗口，你可能会得到完全不同的结果。

Answer 2

您正在另一个 setTimeout() 计时方法中调用 setTimeout() 计时方法。

我的想法是，为什么不像这样分别调用这两个 setTimeout() 方法：

第一个 setTimeout() 方法应该首先执行，然后在执行结束时，它应该调用第二个 setTimeout() 方法。

Answer 3

这是一个移动追逐者的工作脚本：

function _( id ) { return document.getElementById( id ); }

window.addEventListener( 'load', function() {

 var targets = document.querySelectorAll('.target');
  var chaser = document.querySelector('#chaser');

 setTopPosition( targets );

function setTopPosition( targets ) {
    for (var i = 0; i < targets.length; i++) {
        targets[i].addEventListener('mouseenter', function(event) { 

            chaser.className = '';
            _( 'status' ).innerText = chaser.className; // to inspect the active class

           setTimeout(function() {
               /* at this point, I'm expecting no transition // to be active on the element */

              chaser.style.top = event.target.offsetTop + "px";
      }, 0); 

          // check if charser.className == ''
          if ( chaser.className == '') {
              setClassName();
          } else {
              alert( 0 );
          }

       }); // addEventListener
    } // for
} //function setTopPosition( targets )

function setClassName() {
    setTimeout(function() {

         /* at this point, I'm expecting the element to have finished moving to its new position */

        chaser.className = 'active';
        _( 'status' ).innerText = chaser.className;
         }, 0);
} // function setClassName()

});

HTML：

<div id="chaser">o</div> 

<div class="target">x</div> 
<div class="target">x</div> 
<div class="target">x</div> 
<div class="target">x</div> 
<div class="target">x</div>

<div id="status">status</div>

CSS：

#chaser { position: absolute; opacity: 0; }
#chaser.active { transition: all 1s; opacity: 1; }
.target { height: 30px; width: 30px; margin: 10px; background: #ddd; }