0

bueno mi problema es que tengo un objeto que se analiza en un ciclo for y dentro de el se aplica a cada elemento un evento load para saber cuando se cargue el elemento, el problema radica en que el ciclo for analiza todos los elementos pero el código dentro del eventListener se aplica en cada iteracion al ultimo elemento del objeto. simplemente no comprendo, me gustaría una explicación. gracias!

var lienzo = document.getElementById('juego').getContext('2d');
    
    var imgs = {
    	mapa:{ load: false, obj: function(){
    			let obj = new Image();
    			obj.src = 'img/tile.png';
    			return obj;
    		}
    	},
    	vaca:{ load: false, obj: function(){
    			let obj = new Image();
    			obj.src = 'img/vaca.png';
    			return obj;
    		}
    	},
    	cerdo:{ load: false, obj: function(){
    			let obj = new Image();
    			obj.src = 'img/cerdo.png';
    			return obj;
    		}
    	},
    	pollo:{ load: false, obj: function(){
    			let obj = new Image();
    			obj.src = 'img/pollo.png';
    			return obj;
    		}
    	}
    };
    
        var canvas = {
        	loadImg: function(img){
        		for (var key in img){
        			let obj = img[key].obj();
        			console.log(key); // mapa , vaca, cerdo , pollo
        			obj.addEventListener('load', function(){
        				img[key].load = true;
        				console.log(key); // pollo, pollo, pollo, pollo
        				dibujar();
        			}, false);		
        		}
        	}
        }
        canvas.loadImg(imgs);
        
        function dibujar(){
        
        	if(imgs.mapa.load){
        		let obj = imgs.mapa.obj();
        		lienzo.drawImage(obj, 0,0);
        	}
        	if(imgs.vaca.load){
        		let obj = imgs.vaca.obj();
        		lienzo.drawImage(obj, 80,30);
        	}
        	if(imgs.cerdo.load){
        		let obj = imgs.cerdo.obj();
        		lienzo.drawImage(obj, 200,50);
        	}
        	if(imgs.pollo.load){
        		let obj = imgs.pollo.obj();
        		lienzo.drawImage(obj, 250,300);
        	}
        }
<canvas id="juego"></canvas>

2
  • Hola, me parece que el problema es que usas un función anónima para manejar el evento. Si la función es la misma para todos los objetos, considera declararla fuera del bucle y solo referenciarla cuando añades el EventListener. Además, así es más eficiente en cuanto a recursos. Prueba eso y comentas. Recuerda crear la función de tal manera que puedas pasarle el parámetro key. Commented el 26 ene. 2019 a las 18:09
  • Aquí puedes ver soluciones stackoverflow.com/a/38860151/5675636
    – Carmen
    Commented el 26 ene. 2019 a las 18:15

1 respuesta 1

0

puedes hacerlo asi:
Esto se debe al alcanze de var ya que es global y no respeta el alcanse solo a su bloque.
si cambias el loop de var a let te funciona ejemplo: for (let key in img){
Diferencias:
Con let:

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2
  3. Key = 3 en load function 3

Ya que let existo solo dentro del loop y como function load esta dentro puede verla limitandose solo al bloque loop cambiado solo el valor dentro del su bloque pasando una referencia de su valor actual a obj, mas no sobre escribiendolo.

Con var:

  1. Key = 1 en load function 1
  2. Key = 2 en load function 2 pero 1 cambia a 2
  3. Key = 3 en load function 3 pero 1 cambia a 3 y 2 cambia a 3 tambien

Ya que var al ser global no limita su alcance y existe no solo dentro del loop si no tambien fuera y hasta dentro de la funcion anonima sobrescribiendose global por cada iteracion.

 var lienzo = document.getElementById('juego').getContext('2d');
        
        var imgs = {
        	mapa:{ load: false, obj: function(){
        			let obj = new Image();
        			obj.src = 'https://images-na.ssl-images-amazon.com/images/I/91Xe8LC3hSL._SX425_.jpg';
        			return obj;
        		}
        	},
        	vaca:{ load: false, obj: function(){
        			let obj = new Image();
        			obj.src = 'https://storage.contextoganadero.com/s3fs-public/styles/noticias_one/public/ganaderia/field_image/2017-03/vaca_bonita.jpg?itok=K9tDmqsB';
        			return obj;
        		}
        	},
        	cerdo:{ load: false, obj: function(){
        			let obj = new Image();
        			obj.src ='https://www.animanaturalis.org/img/pages/full/201602/P15-12469.jpg';
        			return obj;
        		}
        	},
        	pollo:{ load: false, obj: function(){
        			let obj = new Image();
        			obj.src = 'https://myzone-26ex1sw6hijbg4oa.netdna-ssl.com/wp-content/uploads/2018/05/nutricion-pollo-300x300.jpg';
        			return obj;
        		}
        	}
        };
        
            var canvas = {
            	loadImg:  function(img){
            		for (let key in img){
                  
            			let obj = img[key].obj();
            		  obj.addEventListener('load', function(){
            				img[key].load = true;
                    console.log(key);
            				 dibujar();
            			}, false);		
            		}
            	}
            }
            canvas.loadImg(imgs);
            
            function dibujar(){
            	if(imgs.mapa.load){
            		let obj = imgs.mapa.obj();
            		lienzo.drawImage(obj, 0,0);
            	}
            	if(imgs.vaca.load){
            		let obj = imgs.vaca.obj();
            		 lienzo.drawImage(obj, 80,30);
            	}
            	if(imgs.cerdo.load){
            		let obj = imgs.cerdo.obj();
            		 lienzo.drawImage(obj, 200,50);
            	}
            	if(imgs.pollo.load){
            		let obj = imgs.pollo.obj();
            		 lienzo.drawImage(obj, 250,300);
            	}
            }
<canvas id="juego"></canvas>

1
  • Funciona excelente! acabo de descubrir que moviendo el img.load = true afuera del evento también funciona. aunque tu solución tiene mas sentido gracias! Commented el 26 ene. 2019 a las 19:04

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.