[英]Javascript recursion settimeout
我刚刚开始研究 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 调用必须有效)。 然后什么也没有发生。 对我来说,这表明递归不起作用。
我对其他语言中的递归非常熟悉,所以我认为它一定只是一个语法东西什么的,但我似乎无法弄清楚。 谢谢你的帮助。
问题是,当您将要评估的字符串传递给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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.