Recursion function not defined error

Question

Hi i have a problem with recursion.

i followed this example from wc3 http://www.w3schools.com/jsref/met_win_settimeout.asp But mine seems to not work at all.

function rotateImages(start)
  {
  var a = new Array("image1.jpg","image2.jpg","image3.jpg", "image4.jpg");
  var c = new Array("url1", "url2", "url3", "url4");
  var b = document.getElementById('rotating1');
  var d = document.getElementById('imageurl');
  if(start>=a.length)
      start=0;
  b.src = a[start];
  d.href = c[start];
  window.setTimeout("rotateImages(" + (start+1) + ")",3000);
  }

  rotateImages(0);

Firebug throws the error :

rotateImages is not defined
[Break On This Error] window.setTimeout('rotateImages('+(start+1)+')',3000);

However if i change the timeOut to :

window.setTimeout(rotateImages(start+1),3000);

It recursives but somehow the delay doesn't work and gives me too much recursion(7000 in a sec)

W3Schools is not the W3C. They are a low quality, advert covered, third party tutorial site with good SEO. — Quentin
– Quentin, Commented Jun 8, 2011 at 18:55

Quentin · Accepted Answer · 2011-06-08 18:43:24Z

3

There are many reasons why eval should be avoided, that it breaks scope is one of them. Passing a string to setTimeout causes it to be evaled when the timer runs out.

You should pass a function instead.

window.setTimeout(rotateImages(start+1),3000);

This calls rotateImages immediately, then passes its return value to setTimeout. This doesn't help since rotateImages doesn't return a function.

You probably want:

window.setTimeout(rotateImages,3000,[start+1]);

Or create an anonymous function that wraps a closure around start and pass that instead:

window.setTimeout(function () { rotateImages(start + 1); },3000);

The latter option has better support among browsers.

answered Jun 8, 2011 at 18:43

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Jamie Treworgy Over a year ago

The 2nd method doesn't work with internet explorer so the last is preferred (or use a defined function). blog.skinkers.com/2011/05/31/… has a nice writeup of how to deal with it as well (using a function that returns a function)

Quentin Over a year ago

All you need to know about eval is that you shouldn't use it. It screws up scope. It is slow. It is hard to debug. It risks introducing security problems. Use the last example in my answer.

user113716 · Accepted Answer · 2011-06-08 18:55:54Z

1

Be wary of code from W3Schools.

The other answers give a solution. I'll just add that you're recreating the Arrays and repeating the DOM selection every time the rotateImages function is called. This is unnecessary.

You can change your code like this:

(function() {
    var a = ["image1.jpg","image2.jpg","image3.jpg", "image4.jpg"];
    var c = ["url1", "url2", "url3", "url4"];
    var b = document.getElementById('rotating1');
    var d = document.getElementById('imageurl');

    function rotateImages(start) {
      b.src = a[start];
      d.href = c[start];
      window.setTimeout(function() {
          rotateImages( ++start % a.length );
      }, 3000);
    }

    rotateImages(0);
})();

answered Jun 8, 2011 at 18:55

user113716

323k64 gold badges454 silver badges441 bronze badges

3 Comments

hamahama Over a year ago

Thanks for the answers and helping to refactor my code as well!

hamahama Over a year ago

i love this line! ++start % a.length

user113716 Over a year ago

@Yz Low: You're welcome. Yes, using the modulus operator is a nice way to reset to 0.

aorcsik · Accepted Answer · 2011-06-08 18:42:20Z

1

Try this syntax:

window.setTimeout(function() {
    rotateImages(start+1);
},3000);

setTimeout() expects a function reference as the 1st parameter. Simply putting a function call there would give the return value of te function as the parameter, this is why the delay did not work. However your first try with evaluating a string was a good approach, but it is not recommended.

answered Jun 8, 2011 at 18:42

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

2 Comments

hamahama Over a year ago

Now i understand.. How do i know when I should put the function call?

aorcsik Over a year ago

If you need your function's return value. If you want to give your function (to call it later) you should use the function reference (without the braces) or an anonymous function.

Collectives™ on Stack Overflow

Recursion function not defined error

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related