He estado tratando de escribir un script que cambia un src de imagen cada dos segundos en función de una lista.

Entonces, todo está dentro de un bucle for que recorre esa lista:

$(document).ready(function() {
    var lis = {{dias|safe}}; <----- a long list from django. This part of the code works fine.

    for (i=0; i<lis.length; i++){
        src_img = lis[i][1];
        var timeout = setInterval(function(){
            console.log(src_img)
            $("#imagen").attr("src", src_img);
        }, 2000)
    }
});

No funciona, la consola registra miles de srcs que corresponden al último elemento de la lista. Muchas gracias por tu ayuda.

1
Alejandro Veintimilla 4 sep. 2014 a las 20:28

3 respuestas

La mejor respuesta

No necesita ejecutar el ciclo en este caso, simplemente guarde "puntero" - curentImage y llame al siguiente elemento de la matriz a través de la función cada 2 segundos

 var curentImage = 0;

 function getNextImg(){
    var url = lis[curentImage];

    if(lis[curentImage]){   
    curentImage++;
    } else {
    curentImage = 0;
    }

    return url;
 }

var timeout = setInterval(function(){
            $("#imagen").attr("src", getNextImg());
        }, 2000)
4
shershen 4 sep. 2014 a las 16:38

Necesitas algo como esto

$(document).ready(function() {
    var index = 0;
    setInterval(function(){
         src_img = lis[index++ % lis.lenght][1]; // avoid arrayOutOfBounds 
         $("#imagen").attr("src", src_img);
    }, 2000)
});
2
patricK 4 sep. 2014 a las 17:18
var curentImage = 0;
var length = lis.length;

function NewImage(){
    var url = lis[curentImage];
    if(curentImage < length){
         currentImage++;
    }
   else{
      currentImage = 0;
    }
return url;
}

var timeout = setInterval(function(){
        $("#imagen").attr("src", getNextImg());
}, 2000)

PD: Mejor que el anterior, comprueba la longitud de la lista y comienza desde el principio si llega al final.

1
sidhartha madipalli 4 sep. 2014 a las 16:42