Функция рекурсии не определена ошибка

Question

Привет, у меня проблема с рекурсией.

я последовал этому примеру из wc3 http://www.w3schools.com/jsref/met_win_settimeout.asp Но мой, похоже, не работает вообще.

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 выдает ошибку:

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

Однако, если я изменю timeOut на:

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

Это рекурсивно, но почему-то задержка не работает и дает мне слишком много рекурсии (7000 в секунду)

Answer 1

Есть много причин, по которым eval следует избегать, потому что он нарушает область видимости - одна из них.Передача строки в setTimeout приводит к eval ed, когда таймер заканчивается.

Вы должны вместо этого передать функцию.

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

Это немедленно вызывает rotateImages, затем передаетего возвращаемое значение до setTimeout.Это не помогает, поскольку rotateImages не возвращает функцию.

Возможно, вы захотите:

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

Или создайте анонимную функцию, которая оборачивает замыкание вокруг начала и передает его вместо:

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

Последний вариант лучше поддерживается браузерами.

Answer 2

Попробуйте этот синтаксис:

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

setTimeout() ожидает ссылку на функцию в качестве 1-го параметра.Простое размещение вызова функции даст возвращаемое значение функции в качестве параметра, поэтому задержка не работает.Однако ваша первая попытка оценки строки была хорошим подходом, но это не рекомендуется.

Answer 3

Остерегайтесь кода от W3Schools.

Другие ответы дают решение.Я просто добавлю, что вы воссоздаете массивы и повторяете выбор DOM каждый раз, когда вызывается функция rotateImages.Это не нужно.

Вы можете изменить свой код следующим образом:

(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);
})();