無限ループクローンノードが2回追加される

Question

2回発生するスクリプトに問題があり、いくつかの列をクローンして2回追加します。

私の目標は、ビューポートにない要素を複製して最後に追加し、その要素を前面から削除することです。

要素がビューポートに移動し、要素の左端が幅よりも大きいかどうかを確認する条件に2回入力するようです。

つまり、私は同じ要素の2つのクローンを得て、最後に2回追加しました。これはうまくありません。

奇妙なことは、要素の削除が一度行われたことです。

var moving = false, 
    $holder = $('#carousel'); 

$holder.on('transitionend', function(){ 
    moving = false; // era true 
}); 

offset = 600; 

function getPosition() { 
    wrapper    = document.getElementById('carousel'); 
    wrapper_length  = wrapper.childElementCount; 
    width_of_elements  = wrapper.children[0].getBoundingClientRect().width;  
    current_left   = wrapper.children[0].getBoundingClientRect().left; 
    positive_current_left = current_left * -1;  

    if(Math.round(positive_current_left) > Math.round(width_of_elements)){ 
     // clone + set left after the last one 
     clone   = wrapper.children[0].cloneNode(true); 
     clone.style.left = wrapper.children[wrapper_length - 1].getBoundingClientRect().left + (offset * 2.6) + "px"; 

     console.log(clone); 

     // append child cloned 
     wrapper.appendChild(clone); 

     // delete element cloned 
     wrapper.removeChild(wrapper.childNodes[0]); 
    } 

    if (!moving) { 
     window.requestAnimationFrame(getPosition); 
    } 
} 

window.requestAnimationFrame(getPosition); 

私が間違ってどこかにいます：

ここにいくつかのコードですか？

は、ここでは、アクションでそれを参照するにはフィドルです：

fiddle

Answer 1

あなたがしたいすべてが最後に要素を移動させることであるならば、あなたは-appendChildを「再」することができます。来るときにちょっと気味悪いように見えますが、修正することができます。 ;）

if (Math.round(positive_current_left) > Math.round(width_of_elements)) { 
 
    // clone + set left after the last one 
 
    moveMe = wrapper.children[0]; 
 
    moveMe.style.left = wrapper.children[wrapper_length - 1].getBoundingClientRect().left + (offset * 2.6) + "px"; 
 

 
    // append child cloned 
 
    wrapper.appendChild(moveMe); 
 
}

fiddle