在 setInterval 函数中更改函数参数

Question

有没有办法将这五个 setTimeouts 放入一个 setInterval 中？我需要在每个时间间隔后以某种方式切换函数的参数。基本上，我希望能够清除动画而不必清除 5 个 setTimeouts。这是动画。 www.hodaradesign.com。谢谢！

<script type="text/javascript">
$(window).load(function () {
    setTimeout ("pulse('1')", 300); 
    setTimeout ("pulse('2')", 500); 
    setTimeout ("pulse('3')", 700); 
    setTimeout ("pulse('4')", 900); 
    setTimeout ("pulse('5')", 1100); 
});

function pulse(n) { 
    $(".roll"+n).animate({"opacity": "0"}, 650);
    setTimeout (function (){
        $(".roll"+n).animate({"opacity": "1"}, 350);
    },800)
};

</script>

Answer 1

向脚本添加另一个参数来指定当前超时，然后使用函数本身来增加计数并确定何时（以及是否）发生下一次调用。

<script type="text/javascript">
$(window).load(function () {
    setTimeout( function() { pulse(1,200); }, 300 ); 
});

function pulse(n,time) { 
    if (n <= 5) {
       setTimeout( function() { pulse(n+1,time); }, time );
    }

    $(".roll"+n).animate({"opacity": "0"}, 650);
    setTimeout (function (){
        $(".roll"+n).animate({"opacity": "1"}, 350);
    },800);

};

</script>

Answer 2

试试这个：

<script type="text/javascript">
$(window).load(function () {
        var iCounter = 1; //variable to keep track of current iteration.
        var interValKey = null;//variable to store the key to clear the interval later.
        setTimeout (function(){
            interValKey = setInterval(function(){
                pulse(iCounter); 
                iCounter++;
                if(iCounter == 6){
                clearInterval(interValKey);
                }
            }, 200);
        }, 300); 
});

function pulse(n) { 
    $(".roll"+n).animate({"opacity": "0"}, 650);
    setTimeout (function (){
        $(".roll"+n).animate({"opacity": "1"}, 350);
    },800)
};

</script>

Answer 3

使用 setInterval 调用和函数都可以访问的变量。

<script type="text/javascript">
var n = 1;

$(window).load(function () {
    setTimeout(function() {
        setInterval(pulse, 200);
    }, 300);
});

function pulse() {
    var current_n = n; // avoid a race condition
    $(".roll" + current_n).animate({"opacity": "0"}, 650);
    setTimeout (function (){
        $(".roll" + current_n).animate({"opacity": "1"}, 350);
    }, 800);

    n += 1;
};

</script>