JavaScript - Aparecer imagen en javascript

   
Vista:

Aparecer imagen en javascript

Publicado por Edu (1 intervención) el 12/01/2016 23:32:02
Buenas, estoy aprendiendo javascript y me encontré con un código que hace que al apretar un botón va apareciendo una imagen poco a poco con el setTimeout.
Lo que no entiendo es porque en la funcion efecto no me funciona solamente poniendo setTimeout(aparecer(i), 100*i); solo me funciona dentro de esa funcion y en el parámetro del setTimeout en una funcion anónima.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var button=document.getElementById("button"),
img=document.getElementById("img"),
i;
 
button.addEventListener("click",efecto);
 
function aparecer(i){
        img.style.WebkitOpacity= i/100;
	img.style.filter = 'alpha(opacity=' + i + ')';
	img.style.zoom = 1;
}
 
function efecto(){
        for(i=0; i < 100; i++){
	        (function(i){
        	      setTimeout(function(){aparecer(i);}, 100*i);
          	})(i);
        }
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Aparecer imagen en javascript

Publicado por xve (1596 intervenciones) el 13/01/2016 08:30:12
Hola Edu, no entiendo tu pregunta... nos puedes comentar con mas detalle tu duda?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Aparecer imagen en javascript

Publicado por Vainas (239 intervenciones) el 13/01/2016 09:45:29
Buenas:

Tienes que aprender lo que es el scope o el alcance de una variable y tambien closures que es lo que te sucede aqui.

por desgracia en js no puedes hacer esto:

1
2
3
4
5
function efecto(){
	for(i=0; i < 100; i++){
		setTimeout(aparecer(i), 100*i);
	}
}

Cuando haces setTimeout con los parametros le estas diciendo que le pasas una función que va a llamar cuando pase un determinado tiempo... es decir no se va a ejecutar AHORA sino cuando setTimeout considere que que ha pasado el tiempo que le has dicho. Asi que lo que estas creando internamente es como un conjunto de llamadas en espera. ¿Que pasa mientras esas llamadas esperan? pues que el valor de i cambia por que sigue recorriendo el for hasta llegar al final.

Es decir que cuando empiezan a llamarse esas funciones en realidad dentro de setTimeout o bien no saben que valor tiene i o i tendra el ultimo valor de el for.

Aqui tienes un ejemplo que te he hecho para que veas: https://jsfiddle.net/sLd883bt/

no puedes hacer tampoco:

1
setTimeout(aparecer(i), 100*i);

ya que en realidad le estas diciendo que se ejecute el codigo aparecer en el momento que asignas a setTimeout y no es lo que necesitas en todo caso tendria que ser algo asi:

1
setTimeout("aparecer(i)", 100*i);

o como bien lo has escrito tu:

1
setTimeout(function(){aparecer(i)}, 100*i);

Como se soluciona esto? pues hay algo que se llamo closures y es simplemente guardar el valor de i para que al momento que se ejecute dentro de setTimeout tenga el valor correcto. En este caso una de las formas de solucionarlo según tu código ha sido ejecutar una función (anónima) que pasa el valor de i como parámetro y así se guarda para el futuro.

Esto es una función anónima ejecutada al momento de crearla:

1
2
3
(function(i){
	//... tu codigo aqui en el que se utiliza el i
})(i); // <-- esto de aqui determina la ejecucion de la funcion con un parametro.

Fíjate que los últimos paréntesis determinar que se va a ejecutar con el parámetro que viene del for

Es muy dificil de explicar de este modo pero puedes ver los videos de este profesor en youtube que me lo explico bastante bien: https://www.youtube.com/playlist?list=PLeHi8rVLGcYZMVCwqN2-XN8qrhWZhM1l7

Tambien como estas haciendo modificaciones de css mediante javascript te recomiendo que mires esto:

http://www.javascriptkit.com/javatutors/setcss3properties.shtml

Ya que te puedes encontrar con que la propiedad no existe o por temas del navegador tiene otro nombre (los prefijos del fabricante como -ms- -moz- .... etc).

Por ultimo ya que estas comenzando y no se si has programado anteiormente te recomiendo que te acostumbres a identar tu codigo (agregar espacios a la izquiera para que sea mas legible). En el foro hay opciones para marcar tu codigo y que resalte del texto normal que te pueden ayudar a la hora de colocar codigo en el mismo.

Espero que te sirva todo esto.

Saludos.

Actulizo comentando tu codigo a ver si se entiende mejor:

1
2
3
4
5
6
7
8
9
10
function efecto(){ <-- 1. aqui entras en la funcion
        for(i=0; i < 100; i++){ <-- 2. entras a ejecutar el for
	        (function(i){ <-- 4. Entras en la funcion con el valor de i
                                    <-- en este punto como estamos dentro de una funcion i es una variable local de la función y como tal sera guardada
                                          para los usos que se de dentro de esta funcion.
        	      setTimeout(function(){aparecer(i);}, 100*i); <-- 5. Aqui pasamos i pero el valor no se pierde ya que esta dentro de la funcion anteior
                                                                                                     si estuviera fuera se perderia por que seguiria pasando por el for
          	})(i); <-- 3. Dentro del for vas a ejecutar una funcion con el actual valor del for para el primero sera 0, despues 1.. y asi ...
        }
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar