3

Para la siguiente instrucción:

for(var i = 0; i<3; i++){  
     alert("Primero->"+i);

     setTimeout(function() {
        alert("Segundo->"+i);
      }, (i+1)*600);

}

La salida es la siguiente:

Primero->0

Primero->1

Primero->2

Segundo->3

Segundo->3

Segundo->3

Necesito usar el indice i en el alert.

No entiendo muy bien la ejecución de setTimeout, y porque espera a terminar el for para comenzar la ejecución.

2 respuestas 2

4

Este es un error conocido como Closure dentro de un loop, lo importante que hay que saber es que se produce cuando creas una funcion dentro del ciclo for y utilizas en la funcion el iterador

Hay varias formas de resolverlo. En ECMAScript 2015, puedes usar let en el for y funciona sin problemas (let por var)

for(let i = 0; i<3; i++){  
     alert("Primero->"+i);

     setTimeout(function() {
        alert("Segundo->"+i);
     }, (i+1)*600);
}

Otra opcion es envolver la funcion creada en una IIFE (funcion auto ejecutable).

for(var i = 0; i<3; i++){  
     alert("Primero->"+i);

     (function(i) { 
        setTimeout(function() {
           alert("Segundo->"+i);
        }, (i+1)*600) 
      })(i);
}

Finalmente, puedes como dice la respuesta de @Error404, utilizar una función declarada fuera del for

Necesito usar el indice i en el alert. No entiendo muy bien la ejecución de setTimeout, y porque espera a terminar el for para comenzar la ejecución.

El problema surje por la naturaleza de las variables var de javascript (una caracterista, no un bug). Estas variables "viven" en el ambito lexico de la funcion superior. Por eso se resuelve con let (que mueve al variable al ambito de la funcion local, en este caso el for) y con los otros metodos que crean una nueva funcion que oculta la varianble i original.

2

Necesitarías pasarle una función como callback a tu función setTimeout. Algo similar a esto:

for(var i = 0; i<3; i++){
     alert("Primero->" + i);
     setTimeout(muestraValores, (i+1)*600, i);
}

function muestraValores(i){
  alert("Segundo->" + i);
}

Los parámetros se los deberías de pasar como tercer argumento para que el setTimeout respete el retardo al ejecutar la función.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.