我需要帮助将重复的任务转换为递归函数Javascript

Question

我有一个名为animateLinesDrawing_v1的函数，用于绘制线条的动画。该函数采用两个参数，一个行数组和一个圆数组，并使用画布fabricJS绘制绘图，但是有一个部分一直重复使用特定的模式，我想将其转换为一个名为drawNextLine的递归函数。

​

function animateLinesDrawing_v1(lines, circles)
{
  //Let's say we have 4 lines that connect 3 circles
  lines[0].animate({
        x2: circles[1].left,
        y2: circles[1].top
    }, 
    {
        duration: 4000, //line_1 duration
        onChange: canvas.requestRenderAll.bind(canvas),
        onComplete: function()
        {
            lines[0].setCoords();
            lines[1].animate({
                x2: circles[2].left,
                y2: circles[2].top
            }, 
            {
                duration: 4000, //line_2 duration
                onChange: canvas.requestRenderAll.bind(canvas),
                onComplete: function()
                {
                    lines[1].setCoords();
                    lines[2].animate({
                        x2: circles[3].left,
                        y2: circles[3].top

                    }, 
                    {
                        duration: 4000, //line_3 duration
                        onChange: canvas.requestRenderAll.bind(canvas),
                        onComplete: function()
                        {
                            lines[2].setCoords();
                            lines[3].animate({
                                x2: circles[4].left,
                                y2: circles[4].top
                            },
                            {
                                duration: 4000, //line-4(last line) duration, 
                                onChange: canvas.requestRenderAll.bind(canvas),
                                onComplete: lines[3].setCoords.bind(lines[3])
                            });   
                            
                        }
                        

                    });
                }
                
            });
        }

    });

}

function animateLinesDrawing_v2(lines, circles)
{
  //Let's say we have 4 lines that connect 3 circles
  lines[0].animate({
        x2: circles[1].left,
        y2: circles[1].top
    }, 
    {
        duration: 4000, //line_1
        onChange: canvas.requestRenderAll.bind(canvas),
        onComplete: drawNextLine(lines, circles)
    });
}

let n = lines.length;
let m = 0;
function drawNextLine(lines, circles)
{
    
    if(m !== n)
    {
        lines[m].setCoords();
        lines[m + 1].animate({
            x2: circles[m + 2].left,
            y2: circles[m + 2].top
        },
        {
            duration: 400,
            onChange: canvas.requestRenderAll.bind(canvas),
            onComplete: drawNextLine(lines, circles)
        });
        m++;
    }
    else
    {
        lines[m - 1].setCoords.bind(lines[m - 1]);
    }
    
    
}

​

我的问题是递归函数没有停止运行，所以我可以将它用于函数animateLinesDrawing_v2。

Answer 1

我会把这个任务画成一个承诺：

 function drawLine(line, circle) {
   return new Promise(resolve => {
     line.animate({
       x2: circle.left,
       y2: circle.top
    },  {
      duration: 4000, //line_1 duration
      onChange: canvas.requestRenderAll.bind(canvas),
      onComplete: function() {
        line.setCoords();
        resolve();
      },
    });
  });
 }

然后，您可以轻松地将其写成一个循环：

  (async function() {
    for(let i = 0; i < lines.length && i < circles.length; i++) {
       await drawLine(lines[i], circles[i]);
    }
 })();