等待 canvas 动画和提取完成

Question

所以我正在获取数据（使用 $.ajax），同时为 canvas 设置动画（以创建某种过渡），我正在等待获取这两个数据以及要执行其他操作的动画。

我可以轻松地等待提取完成，但是启动 canvas 动画的第二个函数正在调用另一个函数，即检查动画是否完成的函数。

所以我在考虑一个 promise，但我得到一个错误“Uncaught TypeError: resolve is not a function”，这可能是由于 requestAnimationFrame。

我已经尝试了很多事情（等待等），但似乎无法理解它。

知道我为什么或如何以更简单的方式实现这一目标吗？提前致谢！

function draw() {

    return new Promise( function drawing(resolve, reject) {

        ctx.clearRect(0, 0, canvas.width, canvas.height); 
        ctx.fillStyle = "rgba(255, 255, 255," + opacity + ")";
        ctx.fillRect(0, 0, canvasWidth, canvasHeight) ;

        for (var i = particles.length - 1; i >= 0; i--) {

            particles[i].drawParticle(img); 

            if (particles[i].outOfCanvas) { 
                particles.splice(i, 1);
            }

        }

        fogAnimation = requestAnimationFrame(drawing);

        if(particles.length === 0) {
            cancelAnimationFrame(fogAnimation);
            // below is the error 
            resolve();
        }

    });

};

function launchTransition() {

    img.onload = function()  {     
        draw().then(function() {
            //here is my issue
            console.log("done !");
        })
    };

    img.src = particle_image;

    // doing more stuff...

}



$('.button').on("click", function() {

    fetchData();

    launchTransition();

    //here I want to wait for the two functions above to be done and do something else


});

Answer 1

您的代码存在的问题是，当 drawing 函数被 requestAnimationFrame 回调调用时，参数 resolve 和 reject 未被传递。这就是您收到错误 Uncaught TypeError: resolve is not a function 的原因（因为它是 undefined）。

要修复它，我们需要另一个专门用于处理 promise 的变量（我称之为 drawingTracker）。我也有一个片段供您参考。

var drawingTracker  = {
    resolve: undefined, // this will point to promise resolve
    draw() {
        return new Promise(resolve, reject) {
            this.resolve = resolve // this.resolve (or drawTracker.resolve) is pointing to promise resolve
            draw(); // call draw function below
        }
    },
    finish() {
        this.resolve(); // will resolve promise
    }
};

function draw() { // this function will be called many times by requestAnimationFrame callback
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillStyle = "rgba(255, 255, 255," + opacity + ")";
  ctx.fillRect(0, 0, canvasWidth, canvasHeight) ;

  for (var i = particles.length - 1; i >= 0; i--) {

    particles[i].drawParticle(img); 

    if (particles[i].outOfCanvas) { 
      particles.splice(i, 1);
    }

  }

  fogAnimation = requestAnimationFrame(draw);

  if(particles.length === 0) {
    cancelAnimationFrame(fogAnimation);
    drawingTracker.finish(); // this line will resolve promise without errors
  }
};


function launchTransition() {

    img.onload = function()  {     
        drawingTracker.draw().then(function() { // this line do the trick!!
            console.log("done !");
        })
    };

    img.src = particle_image;

    // doing more stuff...

}

希望对您有所帮助。

等待 canvas 动画和提取完成

wait for canvas animation AND fetch to be completed

javascript

ajax

canvas

requestanimationframe