Javascript游戏循环状态在匿名函数中

Question

I'm messing around with canvas, and starting by reading a bunch of game loop snippets/posts and combining them into the best one possible.

I came upon this snippet today (it's part way through a post , so they make further iterations on it later. But I'm integrating the ideas as I go), but it's perplexing me a little.

Game.run = (
    function() {
        var loops = 0;
        var skipTicks = 1000 / Game.fps;
        var maxFrameSkip = 10;
        var nextGameTick = (new Date).getTime();

        return function {
            loops = 0;

            while ((new Date).getTime() > nextGameTick && loops < maxFrameSkip) {
                Game.update();
                nextGameTick += skipTicks;
                loops++;
            }

            Game.draw();
        };
    }
)();

Game._intervalId = setInterval(Game.run, 1000 / Game.fps);

So Game.run gets assigned the result of the outer function, which is the inside function. But the inside function relies on nextGameTick , which is defined in the outer function...

So will this game be keeping its state in the outer anonymous function? If so, any ideas why they did that?

And as for eg loops , which is set to 0 every call, is it declared outside to avoid re-declaring the variable again each time?

Answer 1

This type of construction is called an immediately invoked function expression or IIFE .

This pattern is used to manage scope. In this case, we are preventing variables like loops and skipTicks from leaking into the global scope. More importantly, they are caught in the closure of the inner function, and thus persist across calls to that inner function. By using an IIFE, only our inner function can see this state, and it is hidden from the global context.

Here's a decent article on the pattern. See in particular the section on saving state with closures.

Answer 2

Yes it will.

The local frame of the function you returned is inside the local frame of the Game.run function. Therefore, any variable that gets changed in Game.run around the function you return is persistent. The parent frame of that function will look inside of Game.run any time you try to reference your nextTick variable.