Javascript recursion settimeout

Javascript recursion settimeout

本文关键字：settimeout recursion Javascript      更新时间：2023-09-26

我刚刚开始看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 slide。我也有一些证据证明它是有效的。发生的是第一个图像加载。然后加载第二个图像(这意味着原始的setTimeout调用必须工作)。然后什么也没发生。对我来说，这表明是递归不起作用。

我对其他语言中的递归很熟悉，所以我认为这一定是语法上的问题，但我似乎不能弄清楚。谢谢你的帮助。

问题是，当您将要评估的字符串传递给setTimeout调用时，评估将在全局上下文中完成(稍后，当该触发时)。因此，您最好(出于许多其他原因)传递实际的函数:

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

在更现代的浏览器中，你可以使用.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);
}

一种的六种，另一种的半打，但只是作为一个例子，表明有多种方法来做事情。

我会非常怀疑第二个setTimeout调用。我将通过使用显式函数而不是字符串表达式

来使它更清晰。
setTimeout(function() { delay(arr, number); }, 1000);

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

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