Javascript 无限循环克隆节点附加两次

我遇到了一个问题，一个脚本触发了两次，它克隆了一些列并附加了两次

我的目标是克隆不在视口中的元素，并在末尾附加它，然后从前面删除该元素

看起来元素离开了视口，在条件中输入了两次，我检查元素的左侧是否大于其宽度

这意味着我得到了同一元素的两个克隆，并在末尾附加了两次，这是不好的

奇怪的是元素的删除触发了一次

下面是一些代码：

我哪里错了

这里有一把小提琴可以看到它的作用：

---

如果您只想将一个元素移到末尾，则可以重新追加子元素。当它开始出现时，看起来有点不稳定，但你可以修复

如果Math.roundpositive\u current\u left>Math.roundwidth\u元素{ //克隆+设置在最后一个之后的左侧 moveMe=wrapper.children[0]； moveMe.style.left=wrapper.children[wrapper_length-1].getBoundingClientRect.left+offset*2.6+px； //附加子克隆 包装器。请给我打电话；

---

}如果您只想将一个元素移到末尾，则可以重新追加子元素。当它开始出现时，看起来有点不稳定，但你可以修复；Daaaaamn@ThomasWikman这是一个更酷、更清晰的解决方案！你可以回答这个问题，我会接受的：非常感谢你！你救了我；

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