所以我在给画布设置动画时（使用$ .ajax）来获取数据（以创建某种过渡），并且我希望等待数据被获取以及动画完成之后再做其他事情。
我可以轻松地等待获取完成，但是启动画布动画的第二个函数正在调用另一个函数，这是一个检查动画是否完成的函数。
所以我在考虑一个诺言，但出现错误“ Uncaught TypeError：resolve不是一个函数”，这可能是由于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
});
最佳答案
您的代码的问题在于，当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...
}
希望能帮助到你。