gpt4 book ai didi

javascript - javascript 中不能等待几毫秒

转载 作者:行者123 更新时间:2023-11-28 21:16:04 26 4
gpt4 key购买 nike

我想绘制一条线,然后等待几毫秒,然后再次绘制下一条线,等待下一条线,依此类推,以便可视化如何逐行绘制它(如心电图波形) 。我怎样才能在这段代码中做到这一点?这是我的代码:

<!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) 之前等待几毫秒对于每条线图

我得到了上述问题的解决方案。我有以下问题

如果我想在 Canvas 上绘制更多点,如果这些点不适合我的 Canvas 宽度,我将重新绘制 Canvas ,但问题是我的图表在第一次重绘期间看起来不稳定(就像心电图波形应用程序一样)较慢,在第二次重画期间,它看起来比第一次重画更快,在第三次重画期间,它看起来比第二次重画更快,依此类推。如何克服呢?我想要稳定的流量,直到我绘制最后一个图表点。

最佳答案

带有 sleep(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);

关于javascript - javascript 中不能等待几毫秒,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7554805/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com