entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

reutilizar elementos de un array en funciones asincronas

cuando lanzo en simultaneo la funcion iniciar y listar imagenes, obtengo un error tipo get en mi primera funcion, si lo inicio separadamente no ocurre este error, esto me hace pensar que los elementos de mi array no estan disponibiles para ambas funciones, que puedo hacer para que no pase esto

<img src="#" id="img">
<button onclick="barajear()">iniciar</button>
<button onclick="detener()">detener</button>
<button onclick="listar()">listar todas las imagenes</button>
<div id="seccion"></div>

<script type="text/javascript">
var files =['enero.jpg', 'febrero.jpg', 'marzo.jpg', 'abril.jpg', 'mayo.jpg'];
var contador = 0;
var intervalo;

function barajear(){
    console.log('inicio')
    img = document.getElementById('img');
    intervalo = setInterval(function(){
       img.setAttribute('src', 'clothes/'+files[contador]);
       img.height = 100;
       contador = contador +1;
       if (contador == files.length) {
          contador = 0;
       }

    }, 5000);
}

function detener(){
    clearInterval(intervalo)
}

function listar(){
    contador = 0;
    contenedor = document.getElementById('seccion');
    loop = setInterval(function(){

    elemento = document.createElement('img');
    resolucion = elemento.height=100;
        rutaImagen = elemento.setAttribute('src', 'clothes/'+files[contador]);
    contenedor.appendChild(elemento);

        contador = contador + 1;
    if(contador == files.length){
      clearInterval(loop);
    }    

    console.log(contenedor + contador);

    }, 5000);
}
</script>

output en consola
clothes/undefined:1 GET file:///F:/xamp/htdocs/local/beta/random/clothes/undefined net::ERR_FILE_NOT_FOUND

1 Respuesta

2votos

magarzon Puntos30650

Estás usando la misma variable contador para las dos funciones, y además en la función listar, cuando compruebas si el contador ha llegado al final, no lo vuelves a poner a 0, solo cancelas el intervalo, por lo que llega un momento en el que ocurre esto:

  • El valor de contador es files.length-1
  • La función barajear aumenta el contador, que pasa a valer files.length
  • La función listar también aumenta el contador, que pasa a valer files.length+1
  • La función barajear comprueba si contador == files.length, pero ya no vale eso, porque la ha aumentado la función listar a files.length+1, por lo que ya se ha salido del tamaño del array y te da un valor undefined

Es lo que en programación se conoce como condición de carrera (race condition en inglés).

En este caso la solución es fácil: lo que debes hacer es usar una variable contador diferenciada para cada función.

0voto

steven comentado

si fuera peter te daria todas las medallas, gracias nuevamente

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta