即使在程序執行完成後，console.log（）仍然保持無限運行

我有一個心電圖程序，它在從陣列中取數值後繪製心電圖。在Firefox中打開控制檯（通過按f12按鈕），即使在構建完所有12個圖之後，它仍然顯示日誌無限次地繼續寫入。它不應該發生！有12個陣列，每個陣列有1250個元素。由於字數限制，我給出了一個數組。點擊「點擊我」按鈕繪製圖形使用畫布。請將問題底部給出的值作爲參考。請幫我找出爲什麼會發生這種溢出。我是初學者。代碼：即使在程序執行完成後，console.log（）仍然保持無限運行

<!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];

來源

2015-12-19 Ha__r__Mug

這是因爲你在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); 
      } 
     }

我已經聲明的變量標誌= 0;

現在你可以做的是設置標誌爲1，只要你的程序完成

來源

2015-12-19 12:20:10

那麼我必須做什麼編輯？對不起，我是一個Javascript初學者。我得到別人的幫助來獲得這些代碼。 :)請你詳細說明一下嗎？ –

我無法理解你在這方面想達到的目標。你能讓我知道你的代碼執行完成的時間和地點嗎？ –

嗨，代碼完成執行，只要圖完成繪圖從數組中取1250個值。所以輸入日誌的值也應該結束。但是日誌條目會無限地發生。 :( –

即使在程序執行完成後，console.log（）仍然保持無限運行

回答

相關問題