如何基于异步数据实现HTML5 Canvas元素动画？

我希望在HTML5 <canvas>上绘制一个矩形，并让它根据异步源提供的坐标移动。我使用setTimeout模拟异步源：

async function getX() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(Math.random() * canvas.width);
         }, 500);
    });
}
async function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const x = await getX();
    ctx.strokeRect(x, 100, 200, 100);
}

animate();

但这段代码无法正常运行。如果不使用requestAnimationFrame()进行动画，代码可以正常绘制，因此我认为问题出在帧推进与异步函数的冲突上。请问该如何修复这个问题？

问题根源在于async版的animate函数：await getX()会暂停整个函数执行，直到500ms后异步请求完成，但requestAnimationFrame会在浏览器下一次重绘时立刻再次调用animate，导致大量未完成的异步请求堆积，同时帧渲染被阻塞，最终引发动画异常。

解决核心是分离异步数据获取与帧渲染逻辑：

• 维护一个变量存储当前要使用的x坐标
• 让异步逻辑独立更新坐标，避免请求堆积
• animate函数只专注于每帧的绘制操作，不等待异步请求

修正代码示例一（带请求防堆积标记） #

// 存储当前绘制用的x坐标
let currentX = 0;
// 标记是否有正在进行的异步请求，避免重复发起
let isFetching = false;

async function getX() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(Math.random() * canvas.width);
         }, 500);
    });
}

// 独立的异步循环，负责定期更新坐标
async function updateXLoop() {
    while (true) {
        if (!isFetching) {
            isFetching = true;
            currentX = await getX();
            isFetching = false;
        }
        // 控制更新周期，避免循环过度占用资源
        await new Promise(resolve => setTimeout(resolve, 500));
    }
}

// 帧渲染函数，仅负责绘制
function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeRect(currentX, 100, 200, 100);
}

// 启动动画和坐标更新流程
animate();
updateXLoop();

修正代码示例二（简洁版） #

let currentX = 0;

async function getX() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(Math.random() * canvas.width);
         }, 500);
    });
}

// 完成一次请求后再发起下一次，天然避免堆积
async function updateX() {
    currentX = await getX();
    setTimeout(updateX, 500);
}

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeRect(currentX, 100, 200, 100);
}

animate();
updateX();

两种方案都是让requestAnimationFrame驱动的渲染流程保持流畅同步，异步数据更新独立修改状态变量，两者互不阻塞，从而解决帧推进与异步函数的冲突问题。

内容的提问来源于stack exchange，提问作者Michael Haddad