javascript - 如何将 setInterval 转换为 requestAnimationFrame

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

有关您编写的代码问题的问题必须在问题本身中描述具体问题 - 并包含有效代码以重现该问题。请参阅SSCCE.org寻求指导。

已关闭 9 年前。

Improve this question

Gustavo Carvalho 发布了一篇 stackoverflow 帖子，展示了相机/视口(viewport)在 HTML5 游戏中的工作原理。

一切都很好，只是使用了 setInterval 而不是 requestAnimationFrame。

我尝试转换为 requestAnimationFrame 但没有成功:-(

有人可以帮忙吗？这是帖子:

Simple HTML5 game camera/viewport

非常感谢!

编辑:在查看下面的答案后，我想出了这个解决方案:

替换以下代码...

 // Game Loop
    var gameLoop = function(){                      

        update();
        draw();
    }   

    // <-- configure play/pause capabilities:



    var runningId = -1;

    Game.play = function(){

        if(runningId == -1){


                //Use setInterval instead of requestAnimationFrame for compatibility reason
            runningId = setInterval(function(){
                gameLoop();
            }, INTERVAL);



            console.log("play");

        }

    }

    Game.togglePause = function(){      
        if(runningId == -1){
            Game.play();
        }
        else
        {
            clearInterval(runningId);
            runningId = -1;
            console.log("paused");
        }
    }   

    // -->

用这个替换...

// Game Loop
    var gameLoop = function(){                      

        if(gameStatus == 'play'){

            update();
                draw();

        }

        window.requestAnimationFrame(gameLoop);

    }   


    var gameStatus = 'play';

    Game.play = function() {

        gameLoop();

    }




    Game.togglePause = function() {

        if(gameStatus == 'play'){

            gameStatus = 'pause';

            console.log(gameStatus);
        }
        else if(gameStatus == 'pause'){

            gameStatus = 'play';

            console.log(gameStatus);

        }



    }

Answer 1

您可以将代码的以下部分修改为:

/// add a flag as condition for loop
var isPlaying = true;

// Game Loop
function gameLoop(){                      
    update();
    draw();

    /// incorporate loop here
    if (isPlaying)
        requstAnimationFrame(gameLoop);
}   

然后:

Game.play = function(){ 
    if (!isPlaying){
        isPlaying = true;    /// enable looping
        gameLoop();          /// start loop
        console.log("play");
    }
}

Game.togglePause = function(){      
    if(!isPlaying){
        Game.play();
    }
    else
    {
        isPlaying = false;   /// this will terminate loop
        console.log("paused");
    }
}

请注意，对于最新版本的 Firefox 和 Chrome，requestAnimationFrame 现在没有前缀。对于较旧的浏览器和其他浏览器，您可能需要使用 polyfill .