如何使用JavaScript将数据发送到具有特定ID的元素？

Question

我使用的WebSockets接收数据的数据包需要发送到两个不同的canvas ES与ID，即magnitude1和magnitude2 。 这些canvas上绘制了图形，我希望定期用新数据刷新图形。 但是，当我调用将数据发送到正确元素的函数时，我的控制台显示数据一次被发送到magnitude1 ， magnitude2一次，然后数据仅被发送到magnitude1进行刷新。 这是我的代码：

dataCollector.onmessage = function(evt)
{
        console.log("onmessage is being called");
        var realData = new Float32Array(evt.data); //data is expected in the format [nodeID,(256 floats)]
        setInterval(function(){readMagPacket(realData);},1000);
}

function readMagPacket(theGoods)
{
    var nodeID = theGoods[0];
    console.log("The node ID is " + nodeID);
    var magnitude = new Array();
    for(var i = 1; i < theGoods.length; i++)
    {
            magnitude[i-1] = theGoods[i];
    }

   console.log("The length of packet " + nodeID + " is " + magnitude.length);

   graphMagnitude(magnitude,nodeY,freqRange);

   Mag(magnitude,nodeID,freqRange);
}

function Mag(magnitude,index,freqRange)
{
    console.log("Mag is called");

    var magPlot = new RGraph.Bar('magnitude'+index,magnitude);

    magPlot.Set('labels',freqRange);
    magPlot.Set('gutter.left',100);
    magPlot.Set('gutter.bottom',40);
    magPlot.Set('ymax',.01);
    magPlot.Set('ymin',0);
    magPlot.Set('backgroun.grid',true);
    magPlot.Set('numyticks',2);
    magPlot.Set('title','Magnitude of Channel ' + index);
    magPlot.Set('title.yaxis','Magnitude (dB)');
    magPlot.Set('title.xaxis','Frequency (MHz)');
    magPlot.Set('title.xaxis.pos',.2);
    magPlot.Set('title.yaxis.pos',.5);
    magPlot.Set('background.color','white');
    magPlot.Set('colors',['green']);
    magPlot.Set('hmargin',.00001);

    magPlot.Draw();
}

更多详细信息：我想以浮点数的形式通过套接字获取数据包，并将其存储在realData 。 我想将其传递给一个函数，该函数将nodeID （这是数据包中的第一个数字）与其余数据分开。 我将使用它来确定将数据发送到哪个canvas 。 在这行var magPlot = new RGraph.Bar('magnitude'+index,magnitude); ，我将nodeID作为index传递。 构造器的'magnitude' + index应确定要在其中创建图形的canvas的id 。 我认为这是错误所在。 我希望能够通过合并来刷新两个图setInterval ， readMagPacket和Mag ，但似乎只被刷新magnitude1只。 当我查看控制台以查看发生了什么情况时，我看到所有数据包都是首先发送的，然后再readMagPacket 。 理想情况下，我希望在通过的每个数据包上调用readMagPacket 。 有什么办法可以修复代码以实现这一目标？

Answer 1

每个数据包到达时，您将使用相同的数据反复调用readMagPacket。 我相信，如果删除setInterval调用，然后直接调用readMagPacket，它将按您的意愿工作。