javascript setTimeout() 无法正常工作

Question

我正在尝试制作一个网站来直观地展示中点线算法的工作。 我想在特定时间间隔后显示点，但 setTimeout() 函数无法正常工作。 它只是在等待 3 秒后显示最终结果。

 <canvas id="ltpcanvas" style="border: 1px solid #000000;"> </canvas> <script> window.onload = function(){ var ltpc = document.getElementById('ltpcanvas'); ltpc.width = window.innerWidth; ltpc.height = window.innerHeight; var context = ltpc.getContext('2d'); var cx1,cx2,cy1,cy2; var count=0; ltpc.addEventListener('mousedown',onDown,false); function onDown(event){ count++; cx = event.pageX; cy = event.pageY; cy-=9; cx-=9; if(count == 1){ cx1=cx; cy1=cy; } else{ cx2=cx; cy2=cy; } var ltpc = document.getElementById('ltpcanvas'); var context = ltpc.getContext('2d'); context.fillStyle = 'black'; context.beginPath(); context.arc(cx,cy,2,0*Math.PI,2*Math.PI,true); context.closePath(); context.fill(); if(cx1!=undefined && cx2!=undefined && cy1!=undefined && cy2!=undefined){ if(cx1<cx2&&cy1<cy2) midpoint(cx1,cy1,cx2,cy2); else{ alert('cx1 = '+cx1+' cy1 = '+cy1+'\\ncx2 = '+cx2+' cy2 = '+cy2); } } } } function midpoint(X1,Y1,X2,Y2){ var dx = X2 - X1; var dy = Y2 - Y1; var d = dy - (dx/2); var x = X1 var y = Y1; while (x < X2) { x++; if (d < 0) d = d + dy; else { d += (dy - dx); y++; } myvar = setTimeout(Dotfunction,3000,x,y); console.log(x); console.log(y); } } function Dotfunction(x,y){ var ltpc = document.getElementById('ltpcanvas'); var context = ltpc.getContext('2d'); context.fillStyle = 'black'; context.beginPath(); context.arc(x,y,1,0*Math.PI,2*Math.PI,true); context.closePath(); context.fill(); } </script>

我每次都试图延迟 Dotfunction() 的执行，但它延迟了 3 秒然后显示整行。 我希望它在显示每个点后延迟。

Answer 1

我想在特定时间间隔后显示点

这里重要的是我们要显示的不是“点”，而是间隔后的“每个点”。 这意味着每个点都将单独绘制。 我假设您希望点在动画中一个接一个地出现。

问题是在这段代码中，我们以相同的目标延迟多次调用setTimeout() 。 即，我们在一个瞬间内多次告诉引擎“在 3 秒内执行此操作”。 获得动画的最简单解决方案是传递越来越高的超时。 由于我们在循环中调用该函数并且因为我们已经在其中有一个计数变量，所以我们可以重用它并要求 JS 引擎在前一个点之后 10 毫秒绘制每个点。

以下代码以每秒 100 像素的速度绘制一条线。

PS：我删除了正文边距，因此不再需要从光标位置中减去它。

 window.onload = function(){ var ltpc = document.getElementById('ltpcanvas'); ltpc.width = window.innerWidth; ltpc.height = window.innerHeight; var context = ltpc.getContext('2d'); var cx1, cx2, cy1, cy2; var count = 0; ltpc.addEventListener('mousedown', onDown, false); function onDown(event) { count++; cx = event.pageX; cy = event.pageY; if (count == 1) { cx1 = cx; cy1 = cy; } else { cx2 = cx; cy2 = cy; } var ltpc = document.getElementById('ltpcanvas'); var context = ltpc.getContext('2d'); context.fillStyle = 'black'; context.beginPath(); context.arc(cx, cy, 2, 0 * Math.PI, 2 * Math.PI, true); context.closePath(); context.fill(); if (cx1 != undefined && cx2 != undefined && cy1 != undefined && cy2 != undefined) { if (cx1 < cx2 && cy1 < cy2) midpoint(cx1, cy1, cx2, cy2); else { // alert('cx1 = '+cx1+' cy1 = '+cy1+'\\ncx2 = '+cx2+' cy2 = '+cy2); } } } } function midpoint(X1, Y1, X2, Y2){ var dx = X2 - X1; var dy = Y2 - Y1; var d = dy - (dx / 2); var x = X1 var y = Y1; while (x < X2) { x++; if (d < 0) d = d + dy; else { d += (dy - dx); y++; } setTimeout(Dotfunction, x * 10, x, y); //console.log(x); //console.log(y); } } function Dotfunction(x, y) { var ltpc = document.getElementById('ltpcanvas'); var context = ltpc.getContext('2d'); context.fillStyle = 'black'; context.beginPath(); context.arc(x, y, 1,0 * Math.PI, 2 * Math.PI, true); context.closePath(); context.fill(); }

 body { margin: 0; }

 <canvas id="ltpcanvas" style="border: 1px solid #000000;"></canvas>