Question

我刚刚开始查看javascript，所以希望这会很简单。我想制作一张自动播放的图像幻灯片。这很简单，并且有一些教程，但由于某种原因，我无法让它工作。这就是我所拥有的：

var image1 = new Image();
var image2 = new Image(); 
var image3 = new Image();
image1.src = "images/website6.jpg";
image2.src = "images/website7.jpg";
image3.src = "images/sunset.jpg";
var images = new Array(
  "images/website6.jpg",
  "images/website7.jpg",
  "images/sunset.jpg"
);
setTimeout("delay(images,0)",2000);
function delay(arr,num){
  document.slide.src = arr[num % 3];
  var number = num + 1;
  setTimeout("delay(arr,number)",1000);
}

我想要更改的图片有id幻灯片。我也有一些证据表明它有效。会发生什么是第一次图像加载。然后加载第二个图像（这意味着原始的setTimeout调用必须正常工作）。然后什么都没发生对我来说这表明这是递归不起作用。

我对其他语言的递归非常熟悉，所以我认为它必须只是一种语法或东西，但我似乎无法弄明白。谢谢你的帮助。

Answer 1

问题在于，当您将要评估的字符串传递给setTimeout调用时，将在全局上下文中完成评估（稍后，在触发时）。因此，通过实际函数传递（由于许多其他原因）会更好：

setTimeout(function() { delay(images, 0); }, 2000);

function delay(arr, num) {
  document.slide.src = arr[num % 3];
  setTimeout(function() { delay(arr, num + 1); }, 1000);
}

在更多modern browsers中，您可以使用函数的.bind()方法创建一个预先绑定到this上的函数的函数：

setTimeout(delay.bind({arr: images, num: 0}), 2000);

function delay() {
  document.slide.src = this.arr[this.num % 3];
  setTimeout(delay.bind({arr: this.arr, num: this.num + 1}), 1000);
}

六分之一，另外六分之一，但正如一个例子所示，有多种方法可以做事。

Answer 2

我会对第二次setTimeout电话非常怀疑。通过使用显式函数与字符串表达式

，我会更清楚

setTimeout(function() { delay(arr, number); }, 1000);

Answer 3

更紧凑，将延迟和参数传递给setTimeout()：

(function delay(arr, num) {
  document.slide.src = arr[num];
  setTimeout(delay, 1000, arr, (num + 1) % 3);
})(images, 0);

Javascript递归settimeout

3 个答案: