0

我正在创建一个动画条形图，它会重绘从标头收到的每个新数据包消息。首先，我创建一个函数来检查图表是否已经存在，如果不存在则构建它：

function drawAccel() {
    if (chart == null) {
      chart = Stripchart(document.getElementById('accel'));
    }

    if (orienteer == null) {
      orienteer = Orienteer(document.getElementById('orienteer'));
    }

    chart.draw();
    orienteer.draw();
}

之后我运行这个函数，该函数在收到的每个标头数据包上循环并重绘图表：

function messagecb(header, message) {
    if(header.type == 6) {
      // echo reply
      // processEchoReply(message);
    }else if(header.type == 4) {
      // accel
      var accels = message.b64UnpackAccelMsg();

      for(var index in accels) {
          var accel = accels[index];
          var totalClock = accelEpochAdjust(accel.clock);

          addAccelDatum(totalClock, accel.x,  accel.y, accel.z);
      }

      drawAccel();

} else if(header.type == 3) {
    // info
    var info2 = message.b64UnpackInfo2Msg();

    displayCurrentPosition(info2.fixtime, info2.lat, info2.lon, info2.alt);
    displayMobileStatus(info2.rssi, info2.bandClass, info2.batt);
} else if(header.type == 11) {
    btReceive(header, message);
  }
}

我在使用这种方法的所有现代浏览器中都没有问题，但在 IE8 中它确实慢了很多。这会导致出现运行缓慢的脚本错误，最终导致应用程序崩溃。我还认为我当前的逻辑导致图表重绘，即使图表在视觉上没有改变，但我不确定如何检查。很抱歉啰嗦了，非常感谢任何帮助！

4

2 回答 2

1

这可能没有太大帮助，所以请不要投反对票。

我遇到了类似的问题，并且只重绘了这么多数据包或在设定的时间范围内，例如：

var mycars = new Array();
var count = 0;

function newPakcet(pck) {
    mycars[mycars.length + 1] = pck;
    redraw();
}
var redrawSize = 10;

function redraw(pck) {
    if (mycars.length > 10) {
        for(var i = 0 ;i < mycars.length;i++){
            //Draw here
        }
       mycars = new Array();
    }
}

没有测试它，所以可能有更多的语法错误。

于 2013-05-23T15:53:14.100 回答
0

经过一些试验和错误以及其他人的一些帮助，最终解决了问题。设置一个局部变量而不是全局变量作为一个计数器，可以检查它是否是 10 的倍数。用它包装 draw 函数，以便它在每 10 个数据包上绘制一次。

function messagecb(header, message) {
    if(header.type == 6) {
      // processEchoReply(message);

    } else if(header.type == 4) {
        var accels = message.b64UnpackAccelMsg();

    for(var index = 0; index < accels.length; ++index) {
        var accel = accels[index];
        var totalClock = accelEpochAdjust(accel.clock);

        addAccelDatum(totalClock, accel.x,  accel.y, accel.z);
    }

    if ( typeof messagecb.counter == 'undefined' ) {
      messagecb.counter = 0;
    }

    ++messagecb.counter;
    if (messagecb.counter % 10 == 0) {
      drawAccel();
    }

  } else if(header.type == 3) {
      // info
      var info2 = message.b64UnpackInfo2Msg();

      displayCurrentPosition(info2.fixtime, info2.lat, info2.lon, info2.alt);
      displayMobileStatus(info2.rssi, info2.bandClass, info2.batt);
  } else if(header.type == 11) {
      btReceive(header, message);
  }
}
于 2013-05-24T05:11:33.023 回答