Changing function parameter within setInterval function

Question

Is there a way to put those five setTimeouts into one setInterval? I need to somehow switch the parameter of the function after each interval. Basically, I want to be able to clear the animation without having to clear 5 setTimeouts. Here is the anim. www.hodaradesign.com. thanks!

<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>

Chandu · Accepted Answer · 2011-04-11 00:38:46Z

1

Try this:

<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>

edited Apr 11, 2011 at 0:38

answered Apr 11, 2011 at 0:30

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Gauthier · Accepted Answer · 2011-04-11 00:34:15Z

1

Use a variable that both the setInterval call and the function can access.

<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>

answered Apr 11, 2011 at 0:34

Jon Gauthier

25.7k6 gold badges66 silver badges69 bronze badges

Comments

tvanfosson · Accepted Answer · 2011-04-11 00:37:56Z

0

Add another parameter to the script to specify the current timeout, then use the function itself to increment the count and determine when (and if) the next invocation occurs.

<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>

edited Apr 11, 2011 at 0:37

answered Apr 11, 2011 at 0:29

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

Changing function parameter within setInterval function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related