递归函数未定义错误

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

但是如果我将超时更改为：

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

它会递归，但不知何故延迟不起作用并给我太多的递归（一秒 7000）

Answer 1

应该避免 eval 的原因有很多，它破坏了范围就是其中之一。将字符串传递给 setTimeout 会导致在计时器超时时对其进行评估。

您应该传递一个函数。

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

这会立即调用 rotateImages，然后将其返回值传递给 setTimeout。这没有帮助，因为 rotateImages 不返回函数。

您可能想要：

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

或者创建一个匿名函数，将闭包包装在 start 周围并传递它：

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

后一个选项在浏览器中具有更好的支持。

Answer 2

请警惕 W3Schools 的代码。

其他答案给出了解决方案。我只是补充一点，每次调用 rotateImages 函数时，您都会重新创建数组并重复 DOM 选择。这是不必要的。

您可以像这样更改您的代码：

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

Answer 3

尝试以下语法：

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

setTimeout() 期望函数引用作为第一个参数。简单地在那里放置一个函数调用就会将函数的返回值作为参数，这就是延迟不起作用的原因。然而，您第一次尝试评估字符串是一个很好的方法，但不建议这样做。