Php 自动更新脚本js/svg

Php 自动更新脚本js/svg,php,javascript,jquery,svg,Php,Javascript,Jquery,Svg,我无法解决这个问题,为什么它只更新最后一个tagid,而不是逐个更新 这是我的第一个乐趣,从加载file.svg开始: function refresh() { totalUpdate(); var t=setTimeout("refresh()",2000); } 以下是功能: function totalUpdate() { //user array with elements on user ID var tags = document.getElemen

我无法解决这个问题,为什么它只更新最后一个tagid,而不是逐个更新 这是我的第一个乐趣,从加载file.svg开始:

function refresh()
{
    totalUpdate();
    var t=setTimeout("refresh()",2000);
}
以下是功能:

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>

函数只更新第二个元素,而不是两个

Javascript具有词法作用域,而$.get是异步的,因此在调用updateDATA时,标记引用列表标记中的最后一个元素。您可以通过使用函数包装异步调用来解决此问题

查看此演示,其中$.get被setTimeout替换: