Estoy agregando múltiples SVG dinámicamente, luego modifico cada uno de ellos. Sin un detector de eventos, el mapa no se veía. Ahora, sin embargo, el detector de eventos parece crear varias instancias del último ciclo, en lugar de una para cada ciclo, solo se modifica la última instancia, pero varias veces con el mismo mygroup,svgID .
for (var i=0; i<path.length; i++) { var mygroup = path[i], svgID = "svgMap" + i const iSVG = document.createElement("object") document.getElementById("summary-mygroup").appendChild(iSVG) iSVG.id = svgID iSVG.type = "image/svg+xml" iSVG.data = "Maps/mygroup_basemap.svg" iSVG.addEventListener('load', function(){ createMap(mygroup,svgID) }) } use const en lugar de var
const mygroup = path[i], divID = "div" + i, svgID = "svgMap" + i Lo que está viendo se debe a function() usando mygroup , divID y svgID forman el alcance del ciclo que sigue actualizándose hasta que se ejecutan las funciones (todas con el valor más reciente). Esto sucede porque se utiliza la misma variable.
var y const / let no se comportan igual var se limita a la función, mientras que let / const se limita al bloque. ( var también se iza, pero eso está menos relacionado con el problema)
entonces si ejecutas:
for (var i=0; i < 3; i++){ var b = i setTimeout(function(){console.log(b)},1)// 😡 2,2,2 } console.log("B:", b) // 😬 2 no esperaría que console.log("B:", b) se ejecute sin un error, pero lo hace, porque el alcance de var existe fuera de la función.
mientras que si usa let o const
for (var i=0; i < 3; i++){ let b = i; setTimeout(function(){console.log(b)},1)// 👍 0,1,2 } console.log("B:", b) // 👍 throws errortendrá el comportamiento esperado, incluido un error en el archivo console.log
Y debido a que es un problema de función versus alcance de bloque, podría mover toda la funcionalidad dentro de una función y llamarla, lo que bloqueará el alcance de la función:
for (var i=0; i < 3; i++){ (function(){ var b = i setTimeout(function(){console.log(b)},1)// 👍 0,1,2 })() }