jquery - 循环几个 setTimeout() 函数？

Question

我已经成功制作了我的动画，我用 setTimeout 改变了 div 的大小。问题是，我找不到让它们循环的方法，我尝试在函数本身内调用 start() 函数，但在第一次执行后，动画变得非常困惑。有人可以帮助我毫无问题地完成整个序列循环吗？

$(document).ready(function () {
    alert('Sådan!');
});


function div1ind() {
    $(function () {
        $('#div1').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div1').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });

}

function div1ud() {

    $(function () {
        $('#div1').animate({
            height: '540px',
            width: '959px',
            top: '0px',
            left: '0px'
        }, 500);

    });



    $(function () {
        $('#div1').css({
            'z-index': 1
        })
    });
}

function div2ind() {

    $(function () {
        $('#div2').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div2').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });


}



function div2ud() {

    $(function () {
        $('#div2').animate({
            height: '540px',
            width: '959px',
            top: '0px',
            left: '959px'
        }, 500);

    });


    $(function () {
        $('#div2').css({
            'z-index': 1
        })
    });
}

function div3ind() {

    $(function () {
        $('#div3').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div3').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });

}

function div3ud() {

    $(function () {
        $('#div3').animate({
            height: '540px',
            width: '959px',
            top: '540px',
            left: '0px'
        }, 500);

    });

    $(function () {
        $('#div3').css({
            'z-index': 1
        })
    });
}

function div4ind() {

    $(function () {
        $('#div4').css({
            'z-index': 2
        })
    });

    $(function () {
        $('#div4').animate({
            height: '1080px',
            width: '1918px',
            top: '0px',
            left: '0px'
        }, 500);
    });
}

function div4ud() {

    $(function () {
        $('#div4').animate({
            height: '540px',
            width: '959px',
            top: '540px',
            left: '959px'
        }, 500);

    });


    $(function () {
        $('#div4').css({
            'z-index': 1
        })
    });
}

function start() {

    $(function () {
        setTimeout('div1ind()', 2000);
        setTimeout('div1ud()', 4000);
        setTimeout('div2ind()', 6000);
        setTimeout('div2ud()', 8000);
        setTimeout('div3ind()', 10000);
        setTimeout('div3ud()', 12000);
        setTimeout('div4ind()', 14000);
        setTimeout('div4ud()', 16000);
    });
}

start();

Answer 1

这是 setInterval 的一个更好的例子，可以防止多个超时实例的竞争条件。

此类解决方案的额外好处是，您可以轻松添加或删除列表中的函数调用，而无需重新编程和仔细检查所有超时。

我在这里所做的是创建一个映射到其他函数的数组，然后设置每 2 秒触发一次的间隔。间隔会增加 i 的值，并调用 i % x 的模函数(其中 x 是列表中函数的数量)。

(编辑:调整代码使其更简洁。编辑2:包装在匿名函数中以防止调用相同的索引。)

var i = 0;
var function_map = [div1ind, div1ud, div2ind, div2ud, div3ind, div3ud, div4in, div4ud];    
window.setInterval(function() {
    function_map[i++ % function_map.length]()
}, 2000);

编辑:根据下面的评论，如果您希望它们有不同的延迟，您可以这样做(将超时添加到函数映射中并构建递归超时链):

var i = 0;
var function_map = [
    [1000,div1ind], 
    [2000,div1ud], 
    [3000,div2ind], 
    [2000,div2ud], 
    [5000,div3ind], 
    [3000,div3ud], 
    [4000,div4in], 
    [2000,div4ud]
];
function start() {    
    var func = function_map[i++ % function_map.length];
    window.setTimeout(function() {
        func[1]();
        start();
    }, func[0]);
}
start();