不能在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)之前，我希望等待几毫秒
我找到了解决上述问题的方法。我有以下问题
如果我想在画布上画更多的点--如果那个点不适合我的画布宽度--我正在重新绘制画布，但问题是我的图形在第一次重绘过程中看起来不稳定(就像心电图波形一样)，在第二次重绘过程中，它看起来比第一次重绘更慢，在第三次重绘时，看起来比第二次重绘更快，等等。如何克服这一问题？我想要稳定的流动直到我画出我的最后一个图形点。
回答 5
Stack Overflow用户
发布于 2011-09-26 12:13:51
睡眠(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);Stack Overflow用户
发布于 2011-09-26 12:10:54
基本上，你需要通过你的循环和设置你所有的画线。每个应该比前一个晚N毫秒，因此(i*100)。
因此，在循环完成后，将绘制一条线，下一条线将在1*100 in中绘制，下一条在2*100 in中绘制，以此类推。
下面是一些修改后的代码：
<!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>Stack Overflow用户
发布于 2012-03-25 14:24:02
setInterval是坏的。如果运行间隔超过时间间隔，您将得到要运行的调用的备份。坚持使用setTimeout，并在运行的块的末尾再次调用它。
https://stackoverflow.com/questions/7554805
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号