我正在動態添加多個 SVG，然后修改它們中的每一個。如果沒有事件偵聽器，則看不到地圖。然而，現在，事件監聽器似乎創建了最后一個回圈的多個實體，而不是每個回圈一個，只有最后一個實體被修改，但多次使用相同的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)
})
}
uj5u.com熱心網友回復：
TL;博士：
使用const而不是var
const mygroup = path[i], divID = "div" i, svgID = "svgMap" i
您所看到的是由于function()使用mygroup,divID和svgID形成回圈的范圍，該范圍不斷更新，直到函式執行（全部具有最新值）。發生這種情況是因為使用了相同的變數。
var和const/let行為不同
var作用域為函式，而let/const作用域為塊。（var也被吊起，但這與問題的關系不大）
所以如果你運行：
for (var i=0; i < 3; i ){
var b = i
setTimeout(function(){console.log(b)},1)// ?? 2,2,2
}
console.log("B:", b) // ?? 2
您不會期望console.log("B:", b)運行時沒有錯誤，但確實如此，因為 var 的范圍存在于函式之外。
而如果你使用let或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 error
您將有預期的行為，包括 console.log 上的錯誤
而且因為這是一個函式與塊范圍的問題，你可以將整個功能移動到一個函式中并呼叫它，這將鎖定函式的范圍：
for (var i=0; i < 3; i ){
(function(){
var b = i
setTimeout(function(){console.log(b)},1)// ?? 0,1,2
})()
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/483140.html
標籤：javascript svg
上一篇：同步使用fetchPromise