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, Jan 11 '11 at 09: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, Jan 11 '11 at 09:51
Infinite recursion is a great way to cause a stack overflow! — Sam Dufel, Jan 11 '11 at 09:53
possible duplicate of [How can I pass a parameter to a setTimeout() callback?](http://stackoverflow.com/questions/1190642/how-can-i-pass-a-parameter-to-a-settimeout-callback) — Jonas Elfström, Jan 11 '11 at 09: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, Jan 11 '11 at 09:54

score 3 · Answer 1 · answered Jan 11 '11 at 09:52

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.

Thank you @Laurencek for providing me tutorial about closures! — zdcobran, Jan 11 '11 at 10:12

Matt · Accepted Answer · 2011-01-11T10:04:50.187

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.

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, Jan 11 '11 at 09:56

score 0 · Answer 3 · answered Jan 11 '11 at 09:57

0

Wouldn't it be better to use setInterval?

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

answered Jan 11 '11 at 09:57

Jake

12,713
18
66
96

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

3 Answers3