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

您的setTimeout次调用会使函数在不同时间启动，因此请再次启动start函数：

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

不要在任何地方使用$(function(){ ... })，这是$.ready(function(){ ... })的简写，即它会绑定ready事件。但是，如果在ready事件发生后执行此操作，jQuery将立即调用回调，因此它只是无用的代码。

绑定ready事件一次以启动start函数，并从所有函数中删除多余的包装器。而不是：

start();

使用此函数将start函数用作ready事件处理程序的回调：

$(start);

或同等的：

$(document).ready(start);

Answer 2

这是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();

循环几个setTimeout（）函数？

2 个答案: