Recursión de Javascript settimeout

Question

Acabo de empezar a buscar en Javascript, así que espero que esto sea algo simple. Quiero hacer una presentación de diapositivas de imágenes que se reproduce automáticamente. Esto es muy simple, y hay algunos tutoriales, pero por alguna razón no he podido hacer que funcione. Esto es lo que tengo:

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

La imagen que intento cambiar tiene una diapositiva de id. Y también tengo alguna evidencia de que funciona. Lo que ocurre es que se carga la primera imagen. Luego se carga la segunda imagen (lo que significa que la llamada setTimeout original debe estar funcionando). Entonces no pasa nada Lo que para mí sugiere que es la recursión que no está funcionando.

Estoy muy familiarizado con la recursividad en otros idiomas, así que creo que debe ser solo una sintaxis o algo así, pero parece que no puedo resolverlo. Gracias por cualquier ayuda.

Answer 1

El problema es que cuando transfiere cadenas para ser evaluado a la llamada "setTimeout", la evaluación se realizará (más tarde, cuando sea el momento de disparar) en el contexto global. Por lo tanto, usted es manera mejor (para un montón de otras razones) que pasa en las funciones reales:

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

En los navegadores más modernos, puede utilizar el método ".bind()" para las funciones para crear una función eso es pre-atado a algo que se utilizará como 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); 
} 

Seis de uno, media docena de los otros, pero sólo como un ejemplo que muestra que hay varias maneras de hacer las cosas.

Answer 2

Sería muy sospechoso de la segunda llamada setTimeout. Lo aclararía más usando una función explícita vs. una expresión de cadena

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