Question

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

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中它确实减慢了很多。这会导致运行缓慢的脚本错误，最终导致应用程序崩溃。我也想到一些关于我当前逻辑的事情导致图表重绘，即使图形没有在视觉上改变，但我不确定如何检查它。对不起，我很感激任何帮助！

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

未测试，因此可能存在更多语法错误。

Answer 2

经过一些试验和错误以及其他人的一些帮助后，这最终解决了问题。设置一个局部变量而不是一个全局来充当一个计数器，可以检查它是否是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);
  }
}

优化循环以减少绘制次数

2 个答案: