javascript - 为什么这个动画只有在第一步之后才会出现延迟？

Question

每个动画完成后，我将 div 移动到子列表的末尾。仅在第一个 complete 函数运行后，下一个动画运行之前才会有延迟。毕竟，没有延迟。

为什么第一个有延迟？

https://jsfiddle.net/cev2Lh9w/

HTML

<div class="outer">
<div class="test">
test
</div>
<div class="test">
test
</div>
<div class="test">
test
</div>
<div class="test">
test
</div>
</div>

Javascript

jQuery( document ).ready(
function()
{
window.doms = document.querySelectorAll(".test");
window.self = document.querySelector( ".outer");
window.currentTile = doms[ 0 ];
window.currentMove = 0;
window.numberToMove = 20;
window.tileHeight = 20;
window.currentIndex = 0;
console.log( self );
moveNext();
});

function finishMove()
    {
        //Move the top tile to the end
        self.appendChild( currentTile );

        //Adjust its top
        currentTile.style.marginTop = "0px";

        //The next tile
        var next = doms[ currentIndex ];

        //Update current move and tile
        currentMove++;
        currentTile = next;

        //Change the current index
        currentIndex = ( currentIndex === doms.length - 1 ) ? 0 : currentIndex += 1;

        //Move again
        if ( currentMove < numberToMove ) moveNext();

        //We're done
        else alert( "done" );
    }

    function moveNext()
    {
        //Animate the sliding
        jQuery( currentTile ).animate(
            {
                marginTop: "-" + tileHeight + "px"
            },
            {
                duration: 200,
                queue: false,
                complete: finishMove
            }
        );
    };

Answer 1

这似乎是 jQuery 包装器的构建。如果我将它们缓存在一个数组中，然后使用该数组的 jquery 对象，则不会有延迟。

https://jsfiddle.net/cev2Lh9w/1/

//Save them as jQuery objects
window.jDoms = [];
for ( var i = 0; i < doms.length; i++ ) jDoms.push( jQuery( doms[ i ] ) );

...

//Call animate on the pre-build jQuery object
jDoms[ currentIndex ].animate(...)