setTimeout (fn, 0) триггер перед стилями были применены

Question

Когда я хочу выполнить исполнение своего javascript и разрешить браузеру применять стили и т. Д., Прежде чем продолжить, я, как правило, использую общую технику setTimeout с задержкой 0, чтобы иметь обратный вызов, поставленный в очередь в конце цикла событий. Однако я столкнулся с ситуацией, когда это, похоже, не работает надежно.

В приведенном ниже фрагменте есть класс active, применяющий переход к элементу chaser.

Когда я парить над целевой DIV, я хочу, чтобы удалить active класс от chaser элемента, переместите chaser на новое место, а затем повторно использовать active класс. Эффект должен заключаться в том, что o должен немедленно исчезнуть, а затем исчезнуть в новом месте. Вместо этого используются как opacity, так и top, поэтому oслайд с позиции на позицию, большую часть времени.

Если я увеличиваю задержку внутреннего таймаута до 10, он начинает вести себя так, как я и предполагал. Если я установил его на 5, то он иногда делает, а иногда нет.

Я бы ожидал, что любой setTimeout поставит в очередь мой обратный вызов до тех пор, пока не будут применены обновления стиля, но здесь есть четкое условие гонки. Я что-то упускаю? Есть ли способ гарантировать порядок обновления?

Я нахожусь на Chrome 56 на macOS и Windows, еще не проверял другие браузеры.

(Я знаю, что могу достичь этого другими способами, такими как применение перехода только к свойству 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. Btw, setTimeout никогда не должны использоваться для гарантии времени.

EDIT: Это для справки после разъяснения от ОП. Всякий раз, когда изменение стиля происходит с элементом, происходит либо перепланирование, либо перерисовка. Вы можете read more about them here. Если второй setTimeout запускается до первого пересчета, вы получаете эффект скольжения. Причина, по которой 10 мс приведет к желаемому эффекту, состоит в том, что класс .active добавляется после того, как свойство offsetTop было скорректировано (что приводит к transition свойствам, примененным после изменения элемента, это offsetTop). Обычно есть 60 кадров в секунду (например, ~ 16 мс на кадр), что означает, что у вас есть окно с 16 мс, чтобы сделать что-либо до применения новых стилей. Вот почему небольшая задержка в 5 мсек иногда приводит к разным результатам.

TL: DR - браузер запрашивает JS и CSS каждые 16 мс для любых обновлений и вычисляет, что делать. Если вы пропустите окно 16ms, вы можете иметь совершенно разные результаты.

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; }