当条件为真时，cancelAnimationFrame() 不起作用 - JS Canvas答案

【问题标题】：cancelAnimationFrame() not working when a conditional is true - JS Canvas当条件为真时，cancelAnimationFrame() 不起作用 - JS Canvas
【发布时间】：2019-02-22 05:24:22
【问题描述】：

我正在使用 JS Canvas 构建一个类似于 Chicken Invaders 的小游戏。目前，我对当敌人击中你的船时你的船爆炸的效果感到困惑。我正在尝试在单独的文件中自行创建效果。

我的想法是，当敌人击中你时，一系列图像（14 个图像）会快速连续播放，从而产生爆炸的错觉。所以我确实包含了<img> 标签，我把它们都放在一个数组中（使用querySelectorAll），然后我确实创建了爆炸效果。我使用了一个计数器来遍历数组并相应地显示每个图像。

但随后计数器不断增加，因此最终会导致indexError，因为它超出了数组的范围。我尝试使用return 终止函数和cancelAnimationFrame()，但它们都不起作用。

结果是控制台中不断出现每秒 60 个错误（当然，这会搞砸一切） jebba-jabba 够了，这里是 JS-Fiddle 的链接：

https://jsfiddle.net/h7Lvpytm/8/

这是我解决这个问题的尝试：

        const canvas = document.querySelector("canvas");
        const ctx = canvas.getContext("2d");
        const video = document.querySelector("video");
        const boomFrames = document.body.querySelectorAll("img");
        let counter = 0;

        function drawBoom() {
            requestAnimationFrame(drawBoom)
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.drawImage(boomFrames[counter], 0, 0, 200, 96);
            counter++;
            if (counter > 13) {
                cancelAnimationFrame(drawBoom)
            }
        }
        drawBoom()

编辑：我也尝试了while 循环，但它甚至没有显示爆炸。这快把我逼疯了。

【问题讨论】：

如果不满足此条件，最好直接调用requestAnimationFrame，或者如果满足则在此之前立即返回，而不是存储 id。

标签： javascript html5-canvas 2d-games requestanimationframe cancelanimationframe

【解决方案1】：

cancelAnimationFrame 采用从requestAnimationFrame 返回的 id

    let counter = 0;

    function drawBoom() {
        const requestId = requestAnimationFrame(drawBoom)
        counter++;
        if (counter > 13) {
            cancelAnimationFrame(requestId);
        }
    }
    drawBoom()

或者正如 Kaiido 指出的那样，您不能请求帧停止

    let counter = 0;

    function drawBoom() {
        counter++;
        if (counter <= 13) {
            requestAnimationFrame(drawBoom);
        }
    }
    drawBoom()

【讨论】：

非常感谢！