Javascript 优化循环以减少绘制次数

我正在创建一个动画条形图，在从报头接收到的每个新数据包消息上重新绘制。首先，我创建一个函数，用于检查图表是否已存在，如果不存在，则生成图表：

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中，它的速度确实慢了很多。这会导致出现运行缓慢的脚本错误，最终导致应用程序中断。我还认为，我当前的逻辑导致图表重新绘制，即使图表在视觉上没有改变，但我不确定如何检查。对不起，我的话太多了，非常感谢您的帮助

这可能帮不了什么忙，所以请不要投反对票

我有一个类似的问题，只会每隔这么多数据包或在设定的时间范围内重新编写，如：

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();
    }
}

var mycars=new Array（）；
var计数=0；
函数newPakcet（pck）{
mycars[mycars.length+1]=pck；
重画（）；
}
var重绘大小=10；
函数重绘（pck）{
如果（mycars.length>10）{
对于（var i=0；i

---

没有测试它，因此可能会有更多的语法错误。

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

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);
  }
}

功能消息CB（标题，消息）{
if（header.type==6）{
//processEchoReply（消息）；
}else if（header.type==4）{
var accels=message.b64unpackallmsg（）；
对于（var指数=0；指数

可能会排队等待，直到你得到10个，然后重新绘制？如果这将在messagecb和draw函数之间使用，我如何设置队列？你会使用此方法替换我的messagecb函数吗？如果数据包的数量是可变的，此方法对你有效吗？