How can I access the same variable in recursive call of a function in javascript?

Question


function onload_animate(id_name, img_src1, img_src2, time_ms){
                document.getElementById(id_name).src = img_src1;
                setTimeout("onload_animate(id_name, img_src1, img_src2, time_ms)", time_ms);
                document.getElementById(id_name).src = img_src2;

        }

This is my given code. I would like to access the same value of parameters from onload_animate(param1, param2,...) in setTimeout() in each recursive call. How can it be possible??

You should really try and accept some answers to your previous questions. — Matt
– Matt, Commented Jan 11, 2011 at 9:50
Okay... I got the point of your statement!! I will accept the answer which works!! But, how about if there are more answers that can be accepted Matt?? Thank you at last for your guidance! :) — zdcobran
– zdcobran, Commented Jan 11, 2011 at 9:51
Infinite recursion is a great way to cause a stack overflow! — Sam Dufel
– Sam Dufel, Commented Jan 11, 2011 at 9:53
possible duplicate of How can I pass a parameter to a setTimeout() callback? — Jonas Elfström
– Jonas Elfström, Commented Jan 11, 2011 at 9:53
You should choose the best one. Which was the most helpful, most detailed? Which answer are other people with a similar problem as yours most likely to find helpful? — Matt
– Matt, Commented Jan 11, 2011 at 9:54

Coin_op · Accepted Answer · 2011-01-11 09:52:35Z

3

If you put the settimeout callback into an anonymous function it should work. That way the parameters stay in scope.

function onload_animate(id_name, img_src1, img_src2, time_ms){
                document.getElementById(id_name).src = img_src1;
                setTimeout(
                    function(){
                         onload_animate(id_name, img_src1, img_src2, time_ms);
                    }, time_ms);
                document.getElementById(id_name).src = img_src2;

        }

Try reading up about javascript closures, they are very useful.

answered Jan 11, 2011 at 9:52

Coin_op

10.8k4 gold badges38 silver badges47 bronze badges

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

1 Comment

zdcobran Over a year ago

Thank you @Laurencek for providing me tutorial about closures!

Matt · Accepted Answer · 2011-01-11 10:04:50Z

1

It is considered bad practise to pass setTimeout a string. This is similar to using eval(), which is evil in JavaScript.

function onload_animate(id_name, img_src1, img_src2, time_ms){
    document.getElementById(id_name).src = img_src1;

    setTimeout(function () {
        onload_animate(id_name, img_src1, img_src2, time_ms);
    }, time_ms);

    document.getElementById(id_name).src = img_src2;
};

Will capture the variables so they are available within setTimeout. Note that this function will currently loop forever; you need some form of exit (usually checking a conditional; e.g. has time_ms expired yet?)

Your code should probably look something like this;

function onload_animate(id_name, img_src1, img_src2, time_ms) {
    document.getElementById(id_name).src = img_src1;

    setTimeout(function () {
        onload_animate(id_name, img_src2, img_src1, time_ms);
    }, time_ms);
};

See this snippet for a working example: http://www.jsfiddle.net/3vKnW/.

JavaScript does not wait for setTimeout to complete. It is asynchronous. JavaScript will hit the setTimeout line, schedule the function to be ran in time_ms time, but will then go back and continue executing where it left off.

edited Jan 11, 2011 at 10:04

answered Jan 11, 2011 at 9:52

Matt

75.4k26 gold badges156 silver badges181 bronze badges

2 Comments

zdcobran Over a year ago

Actually, I am trying to animate a picture continuously. So, I should keep on running this function; right?? But, still it is not working! I have put alert() statement after the last statement of this function, and this alert() statement execute only once.

zdcobran Over a year ago

That is what I was trying to do!! Thank you Matt! :)

Jake · Accepted Answer · 2011-01-11 09:57:29Z

0

Wouldn't it be better to use setInterval?

var int=self.setInterval("onload_animate()",time_ms);

answered Jan 11, 2011 at 9:57

Jake

13.2k19 gold badges71 silver badges97 bronze badges

Collectives™ on Stack Overflow

How can I access the same variable in recursive call of a function in javascript?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related