javascript setTimeout无法正常工作

如何解决javascript setTimeout无法正常工作

我正在尝试创建一个网站以直观地显示中点线算法的工作。我想在特定时间间隔后显示点，但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,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,true);
        context.closePath();
        context.fill();
    }

</script>

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

解决方法

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

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

问题在于，在这段代码中，我们以相同的目标延迟多次调用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,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,true);
        context.closePath();
        context.fill();
    }

body {
  margin: 0;
}

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