自動更新スクリプトjs/svg

Question

これは修正できないため、1つ1つではなく最後のタグ（ID）のみが更新されます これはfile.svgのonloadで始まる私の最初の楽しい（）です：

function totalUpdate() 
{ 
    //user array with elements on user ID 
    var tags = document.getElementById("user").getElementsByTagName("circle"); 

    for(var i=0;i<=document.getElementById('user').childElementCount;i++) 
    { 

     var tag=null,id=null,url=null; 
     id=tags[i].getAttribute("id"); 
     tag=tags[i]; 
     url="get.php?id="+id; 
     $.get(url,function(data){ 
      updateDATA(tag, data); 
     }); 
    } 
} 

function updateDATA(tag, data){ 
    data=data.split(" "); 
    //data[0]=>x data[1]=>y data[2]=>data 
    var x,y; 

    //$x=(($x*1000000-$bx)*$svgwidth/$mx*-1)*1000000; 
    x=((data[0]*1000000-20959350)*352/3615); 
    y=((data[1]*1000000-41989603)*662/5391)*-1; 

    tag.setAttribute("cx",x+4); 
    tag.setAttribute("cy",y+5); 
} 

SVG本体：

<g id='user'> 


    <circle class="user" id="1" cy="329" cx="179" r="5" style="fill:red"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="1s" repeatCount="indefinite" /> 
    </circle> 


    <circle class="user" id="2" cy="366" cx="189" r="5" style="fill:green"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="1s" repeatCount="indefinite" /> 
    </circle> 
    </g> 

機能のみ第二の要素を更新

function refresh() 
{ 
    totalUpdate(); 
    var t=setTimeout("refresh()",2000); 
} 

そして、ここでは機能していますそれらの両方ではない！

Answer 1

Javascriptがレキシカルスコープを持ち、時間updateDATAでtag参照にリストtagsの最後の要素を呼び出されるので$.getは、非同期です。非同期呼び出しを関数でラップすることで、これを修正できます。

チェックアウト$.getがsetTimeoutに置き換えられ、このデモ：http://jsfiddle.net/GuGb4/