Question

我遇到了一个问题，一个脚本会触发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。当它开始出现时看起来有点不稳定，但你可以解决。 ;）

(new WebDriverWait(driver, 120)).until(ExpectedConditions.invisibilityOfElementLocated(By.className("Spinner")));

fiddle

无限循环克隆节点追加两次

1 个答案: