setTimeout在此代码中触发两次？

Question

所以我有这个代码。

var x = 0;

function Main() {
    console.log("window load occurred!");
    console.log('imgChild log!');
    var firstChildren = $('.imgChild');
    var arrChildren = [];
    for (var i = 0, l = firstChildren.length; i < l; i += 3) {
        arrChildren.push(firstChildren.slice(i, i + 3));
    }
    console.log(firstChildren);
    console.log(arrChildren);
    arrChildren[0].fadeIn();
    var length = arrChildren.length;

function myAnim() {
    // debugger;
    console.log('timeout log');
    console.log(x);
    arrChildren[x].animate({
        left: '-100%'
    }, function() {
        arrChildren[x].hide().animate({
            left: '0%'
        }).css('top', '0');
        x++;
        console.log(x);
        arrChildren[x].css({
            top: '0px',
            left: '100%'
        }).show().animate({
            left: '0%'
        });
        setTimeout(myAnim, 3000);
    });
}
setTimeout(myAnim, 3000);
}

$(window).on('load', Main);

正如您可以猜到窗口加载时，会调用Main函数。创建正确的数组后，它会设置一个计时器。在调用myAnim函数时，控制台应该通过我的逻辑... 'timeout log'，0（x），1（{在x之后{1}}然后它应该移动到下一个超时。但是，在记录x++之后，我立即看到控制台记录1，好像2已完成两次。为什么会这样？我该如何解决？我做了一些研究，事实证明有时settimeout会触发两次，但在这种情况下我无法解决如何解决问题。