JavaScript代码导致强制同步布局

Question

需要在Javascript中修复这段代码，导致强制同步布局。

关于如何做出任何想法或帮助？

function updatePositions() {
    frame++;
    window.performance.mark("mark_start_frame");

    var items = document.querySelectorAll('.mover');
    for (var i = 0; i < items.length; i++) {
    var phase = Math.sin((document.body.scrollTop / 1250) + (i % 5));
    items[i].style.left = items[i].basicLeft + 100 * phase + 'px';
}

Answer 1

您的代码未得到很好的实施。所以，我修复了一些错误尝试。

＆＃13;

＆＃13;

var frame = 0;

function createMark(name) {
  if (performance.mark === undefined) {
    console.log("performance.mark Not supported");
    return;
  }
  // Create the performance mark
  performance.mark(name);
}

var updater = document.getElementById('updater');
updater.addEventListener('click', function() {
  updatePositions() ;
});

function updatePositions() {
  frame++;
  //window.performance.mark("mark_start_frame");
  createMark('mark_start_frame');
  
  var items = document.querySelectorAll('.mover');
  var index = 0;
  items.forEach(function(item){
    var phase = Math.sin((document.body.scrollTop / 1250) + (index % 5));
    item.style.left = (item.offsetLeft + 100 * phase) + 'px';
  });
  console.log('updatePositions()');
}

＆＃13;

<div id="updater">Click to Update</div>
<p></p>
<div id="moverA" class="mover">A</div>
<div id="moverB" class="mover">B</div>
<div id="moverC" class="mover">C</div>
<div id="moverD" class="mover">D</div>
<div id="moverE" class="mover">E</div>
<hr>

＆＃13;

＆＃13;

＆＃13;