Question

我有一个心电图程序，在从数组中取值后绘制心电图。在Firefox中打开控制台（通过按f12按钮）后，即使在构建了所有12个图形之后，它也会显示无限写入日志。它不应该发生！有12个阵列，每个阵列有1250个元素。因为这里的字数限制我给了一个数组。单击“单击我”按钮使用画布绘制图形。请采用问题底部给出的值作为参考。请帮我找出为什么会发生这种溢出。我是初学者。代码：

    <!doctype html>
    <html>
    <head>
    <script>
    function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
  window.addEventListener('load', onLoadd, false);
  var YRatio=0.75;
  var nPointsPerFrame = 10;//This value determines the speed. Higher value means more speed.
  var Lead_1 = [];

function onLoadd(evt)
{
  drawBkg(byId('canvas'), 3.78, "0.35", "black");
}
function onDocLoaded(evt)
{

 //Markings();
 drawcurFrame_Lead_1.apply(this, Lead_1);

}
function drawBkg(canvasElem, squareSize, minorLineWidthStr, lineColStr)
{
 var nLinesDone = 0;
 var i, curX, curY;
 var ctx = canvasElem.getContext('2d');
 ctx.clearRect(0,0,canvasElem.width,canvasElem.height);

 // draw the vertical lines
 curX=0;
 ctx.strokeStyle = lineColStr;
 while (curX < canvasElem.width)
 {

    ctx.lineWidth = minorLineWidthStr;
    ctx.beginPath();
    ctx.moveTo(curX, 0);
    ctx.lineTo(curX, canvasElem.height);
    ctx.stroke();

    curX += squareSize;
    nLinesDone++;
}

// draw the horizontal lines
curY=0;
nLinesDone = 0;
while (curY < canvasElem.height)
 {
    ctx.lineWidth = minorLineWidthStr;
    ctx.beginPath();
    ctx.moveTo(0, curY);
    ctx.lineTo(canvasElem.width, curY);
    ctx.stroke();

    curY += squareSize;
    nLinesDone++;
  }
}



//FIRST GRAPH Lead_1
// position that will be treated as 0,0 when drawing our points.
var originX_Lead_1=46;
var originY_Lead_1=16;

function Draw_Lead_1(nSamplesToDraw, firstSample, lineWidthStr, lineColourStr)
{
var can = byId('canvas');
var ctx = can.getContext('2d');

ctx.strokeStyle = lineColourStr;
ctx.lineWidth = lineWidthStr;
console.log(firstSample);
ctx.beginPath();

ctx.moveTo( originX_Lead_1+(firstSample*0.377), originY_Lead_1+(Lead_1[firstSample-1]*YRatio) );

for (i=0; i<nSamplesToDraw; i++)
{                           
    var curSample = Lead_1[i + firstSample];// calculate y coordinate


    ctx.lineTo( originX_Lead_1+((firstSample+i)*0.377), originY_Lead_1+(curSample*YRatio) );


}

    ctx.stroke();
}

var curFrame_Lead_1=0;//Starts with frame 0.
function drawcurFrame_Lead_1()
{    
Draw_Lead_1(nPointsPerFrame, nPointsPerFrame*curFrame_Lead_1, "0.75", "blue");//Calling function to draw the graph
curFrame_Lead_1+=1;//Frame is incremented one by 1.
    requestAnimationFrame( drawcurFrame_Lead_1 );
}

</script>
</head>
<body>
<div id='txt'></div>

 <canvas id="canvas" width="1250" height="800"></canvas>
    <button onclick="onDocLoaded()">Click Me</button>
</body>
</html>

Lead_1 = [69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,69,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,73,73,73,73,73,73,73,73,73,72,72,72,72,72,72,72,71,71,71,70,69,69,68,67,67,67,67,68,68,69,69,70,71,72,72,73,73,73,73,73,73,73,73,73,72,72,73,73,73,73,73,72,72,73,76,79,81,80,75,67,55,44,36,34,38,46,57,67,74,77,77,76,74,73,72,73,73,73,73,73,73,73,74,74,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,74,73,73,72,71,70,69,68,68,67,66,66,65,64,63,63,62,61,61,61,61,61,61,61,61,61,62,62,63,64,64,65,66,67,68,69,70,71,71,72,73,73,73,73,73,73,73,73,73,74,74,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,73,73,74,74,73,73,72,72,72,72,73,73,73,72,72,72,72,72,73,73,73,72,72,72,72,73,73,72,72,72,71,70,69,69,69,68,67,67,67,67,67,67,68,69,69,70,71,71,72,73,73,73,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,73,75,78,80,78,72,62,51,40,34,33,39,49,59,69,75,77,77,75,73,72,72,72,72,73,73,73,72,72,72,73,73,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,71,71,71,70,70,69,68,67,66,65,64,64,64,63,63,62,61,61,60,60,60,60,60,60,60,61,61,62,62,63,64,65,66,67,67,68,69,70,71,71,72,72,72,72,72,72,72,73,73,73,73,72,72,72,72,72,72,72,72,72,73,73,73,73,73,73,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,71,70,70,69,69,68,68,67,67,66,66,66,67,67,68,69,70,71,71,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,74,76,79,80,77,70,60,49,39,33,33,40,50,61,70,75,77,76,75,73,72,72,72,73,73,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,73,72,72,71,70,69,69,68,67,66,65,64,64,63,62,62,61,60,60,60,60,61,61,61,61,61,61,62,62,63,64,65,66,67,68,69,69,70,71,72,73,73,73,73,73,73,73,73,73,73,73,72,73,73,73,73,73,73,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,72,72,72,73,73,73,73,72,72,72,72,73,73,73,72,72,71,70,70,69,68,68,67,67,67,67,67,67,68,68,69,69,70,70,71,72,72,72,72,72,72,72,73,73,73,73,72,72,72,72,72,72,72,73,74,77,79,79,76,68,57,45,36,33,36,44,54,64,72,76,77,76,75,73,72,72,72,73,73,73,73,73,72,72,72,72,72,72,72,72,73,73,73,73,73,73,73,73,72,73,73,73,72,72,71,70,69,68,68,67,66,65,64,63,62,62,62,61,61,61,60,60,61,61,61,61,62,62,63,63,64,64,65,66,67,68,69,69,70,71,72,72,72,73,73,73,73,73,73,73,72,72,72,72,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,73,72,72,73,73,73,73,73,73,72,72,72,72,73,73,72,72,72,72,72,73,73,73,72,72,72,72,72,72,72,72,72,71,70,69,68,68,67,67,67,66,66,67,67,68,69,70,70,71,71,72,72,72,72,72,72,72,72,73,72,72,72,72,72,72,72,72,71,72,74,77,79,78,74,66,55,44,36,33,36,44,55,65,72,76,77,76,74,73,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,71,71,71,70,70,69,68,67,66,65,64,64,63,63,62,61,61,60,60,60,60,60,60,60,61,61,62,62,63,63,64,65,66,67,67,68,69,70,71,72,73,73,72,72,72,72,72,72,73,73,73,73,72,72,72,73,73,72,72,72,72,72,72,72,73,73,72,72,72,72,72,73,73,73,73,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,72,71,70,70,69,68,68,67,67,67,67,67,67,68,68,69,70,70,71,72,72,72,72,72,72,72,72,72,72,72,72,72,72,73,72,72,72,72,73,76,79,80,79,73,64,52,41,34,34,39,49,59,69,75,77,77,76,74,73,73,73,73,73,73,73,73,73,73,73,73,73,74,74,73,73,73,73,73,73,74,74,74,74,74,74,74,74,73,72,71,70,69,68,68,67,67,66,65,64,64,64,63,63,63,62,62,62,62,63,63,63,63,64,64,65,66,66,67,68,69,71,72,72,73,74,75,75,75,76,76,76,74,72,70,70,69,69];

Answer 1

这是因为您在requestAnimationFrame中调用了drawcurFrame_Lead_1。你必须在drawcurFrame_Lead_1

中放置条件来完成程序的执行

<强>更新

var flag= 0;

        function drawcurFrame_Lead_1()
        {
            if(flag ==0)
            {
                Draw_Lead_1(nPointsPerFrame, nPointsPerFrame*curFrame_Lead_1, "0.75", "blue");//Calling function to draw the graph
                curFrame_Lead_1+=1;//Frame is incremented one by 1.
                requestAnimationFrame( drawcurFrame_Lead_1 );
            }
        }

我声明了变量flag = 0;

现在你可以做的是在程序完成时将flag设置为1

即使程序完成执行，console.log（）也会无限运行

1 个答案: