不能在javascript中等待幾毫秒

我想畫一條線然後等待幾毫秒然後再畫下一條線等待下一條線等等，這樣它就可以看出它將如何逐行繪製（如ECG波形）。如何在這段代碼中做到這一點？這是我的代碼：不能在javascript中等待幾毫秒

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 

    var ms = 0; 
    var y=5; 
    var x=5; 
    var copyendx=0; 
    var copyendy=0; 
    var context; 
    var temp,total=0; 
    //var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,1,3,3,4-,8,5,6,6,7,7); 
    var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,4,7,9,2,2,8); 
    //alert(data); 

    function init() { 
     var graphCanvas = document.getElementById('graphSpace'); 
     context =graphCanvas.getContext('2d'); 
     drawgraph(); 
    } 

    function drawgraph() { 
     drawLine(context,5,50,5,250); 
     drawLine(context,5,150,7,150); 
     // setTimeout(drawgraph(),600); 
     for (var i=0;i<data.length;i++) { 
      var startx=5+x; 
      var starty=150-(data[i]*y); 
      var endx=(5+x)+1; 
      var endy=150-(data[i]*y); 
      if (i==0) { 
       copyendx=endx; 
       copyendy=endy; 
       startx=5+x; 
       starty=150; 
      } 
      //draw line and wait for some milliseconds 
      setInterval(function() { 
       drawLine(context,startx,starty,copyendx,copyendy); }, 100); 
       drawLine(context,startx,starty,copyendx,copyendy); 
       x=x+5; 
       // pausecomp(100); 
       copyendx=endx; 
       copyendy=endy; 
      } 
     } 
    } 
    //Draw line function 

    function drawLine(contextO, startx, starty, endx, endy) { 
     contextO.beginPath(); 
     contextO.moveTo(startx, starty); 
     contextO.lineTo(endx, endy); 
     contextO.closePath(); 
     contextO.stroke(); 
    } 

</script> 
</head> 
<body onload="init()"> 

    <canvas id="graphSpace" width="800" height="400" style="background-color:  #ffff00;"></canvas> 

    </body> 
    </html>

我已經在使用setInterval

setInterval(function() { 
    drawLine(context,startx,starty,copyendx,copyendy); 
}, 100);

試過，但我沒有得到期望的輸出。我想等待幾毫秒，然後爲每個線條圖調用方法drawLine(contextO, startx, starty, endx, endy)

我得到了解決上述問題的方法。我有以下問題

如果我想在畫布上繪製更多點，如果這些點不適合我的畫布寬度，我正在重畫畫布，但這裏是我的圖形看起來不穩定的問題（如ECG波形應用）在第一次重繪期間它看起來較慢，在第二次重繪期間它看起來比第一次重繪更快，在第三次重繪期間它看起來比第二次重繪更快，等等。如何克服？我需要穩定的流程，直到我畫出最後一個圖形點。

來源

2011-09-26 tejas26389

用'setTimeout' –

帶睡眠（100）循環的概念是不是設計用javascript來完成的。

擺脫循環的，做這樣的事情：

var x,y,i=0; 
setTimeout(function doDraw() { 
    var startx=5+x; 
    var starty=150-(data[i]*y); 
    var endx=(5+x)+1; 
    var endy=150-(data[i]*y); 
    drawline(yourargs); 
    i++; 
    if (i < data.length) { 
     setTimeout(doDraw, 100); 
    } 
}, 100);

來源

2011-09-26 12:13:51 karnyj

謝謝，它的工作 – tejas26389

如果我的數據超出了我的畫布寬度，我正在重新繪製它，但是超時比填充我的整個畫布之前繪製的數據要快，我希望同樣的超時在我的數據超出我的畫布寬度之後（重繪期間）可以管理它？ – tejas26389

這不行。你需要傳遞給setInterval函數的引用。

function drawLine(context,startx,starty,copyendx,copyendy){} 

    var func = partial(drawline, context,startx,starty,copyendx,copyendy); 

    setInterval(func, 100);

來源

2011-09-26 12:09:40 Ehtesham

基本上你需要通過你的循環，並設置所有的畫線。每個應該是N毫秒，然後是前一個毫秒，因此（i * 100）。

打完循環完成一行將被吸引，下一個會在1 * 100毫秒下一個2個* 100毫秒等繪製...

這裏是一些修改代碼：

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript"> 

    var ms = 0; 
    var y=5; 
    var x=5; 
    var copyendx=0; 
    var copyendy=0; 
    var context; 
    var temp,total=0; 
    //var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,1,3,3,4-,8,5,6,6,7,7); 
    var data=new Array(-1,3,-3,-7,5,1,-1,-3,2,5,7,7,7,7,4,7,9,2,2,8); 
    //alert(data); 

    function init() { 
     var graphCanvas = document.getElementById('graphSpace'); 
     context =graphCanvas.getContext('2d'); 
     drawgraph(); 
    } 

    function drawgraph() { 
     drawLine(context,5,50,5,250,0); 
     drawLine(context,5,150,7,150,0); 

     for (var i=0;i<data.length;i++) { 
      var startx=5+x; 
      var starty=150-(data[i]*y); 
      var endx=(5+x)+1; 
      var endy=150-(data[i]*y); 
      if (i==0) { 
       copyendx=endx; 
       copyendy=endy; 
       startx=5+x; 
       starty=150; 
      } 
      //draw line and wait for some milliseconds 

       drawLine(context,startx,starty,copyendx,copyendy,i*100); 
       drawLine(context,startx,starty,copyendx,copyendy,i*100); 
       x=x+5; 

       copyendx=endx; 
       copyendy=endy; 
      } 
     } 
    //Draw line function 

    function drawLine(contextO, startx, starty, endx, endy,delay) { 
     setTimeout(function(){ 
      contextO.beginPath(); 
      contextO.moveTo(startx, starty); 
      contextO.lineTo(endx, endy); 
      contextO.closePath(); 
      contextO.stroke(); 
     },delay); 
    } 

</script> 
</head> 
<body onload="init()"> 

    <canvas id="graphSpace" width="800" height="400" style="background-color:  #ffffff;"></canvas> 

    </body> 
    </html>

來源

2011-09-26 12:10:54 Ivan

我想，當我的I = 0畫一條線，若i = 1，則畫下一條線等 – tejas26389

您可以設置任何你的「for」循環 – Ivan

我正在畫在座標想要它做點填充我的畫布（如上面的邏輯我已經使用時間戳），並在此之後（在重繪期間）下一個不適合我的畫布的點，我正在重繪圖形（從下一個點到上一個起點）到（下一個點到上一個結束點），但在這裏我不能得到與上一次重繪下一個點期間相同的時間戳，這裏的問題是，在重新繪製drawLine（）方法之後調用所有循環計算，以便我在同一個畫布上獲得更多的一個波形 – tejas26389

嘗試setTimeout（「drawLine（context，startx，starty，copyendx，copyendy）」，100）;.這會延遲100毫秒。

來源

2011-09-26 12:11:06

的setInterval是壞的。如果需要比間隔運行更長的時間，則最終會有要運行的調用的備份。堅持setTimeout並在你正在運行的程序塊的末尾再次調用它。

來源

2012-03-25 14:24:02 rspring1975

不能在javascript中等待幾毫秒

回答

相關問題