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

您的代碼執行得不好。所以，我修正了一些錯誤嘗試與此。

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()'); 
 
}

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