有人可以向我解释此Javascript Singleton代码吗？

Question

this file

http://www.iguanademos.com/Jare/docs/html5/Lessons/Lesson2/js/GameLoopManager.js

taken from this site

Here is the code:

            // ----------------------------------------
            // GameLoopManager
            // By Javier Arevalo


            var GameLoopManager = new function() {
                this.lastTime = 0;
                this.gameTick = null;
                this.prevElapsed = 0;
                this.prevElapsed2 = 0;

I understand the declaration of variables, and they are used to record the time between frames.

                this.run = function(gameTick) {
                    var prevTick = this.gameTick;
                    this.gameTick = gameTick;
                    if (this.lastTime == 0)
                    {
                        // Once started, the loop never stops.
                        // But this function is called to change tick functions.
                        // Avoid requesting multiple frames per frame.
                        var bindThis = this;
                        requestAnimationFrame(function() { bindThis.tick(); } );
                        this.lastTime = 0;
                    }
                }

I don't understand why he uses var bindThis = this

                this.stop = function() {
                    this.run(null);
                }

This function set's gameTick to null, breaking the loop in this.tick function.

                this.tick = function () {
                    if (this.gameTick != null)
                    {
                        var bindThis = this;
                        requestAnimationFrame(function() { bindThis.tick(); } );
                    }
                    else
                    {
                        this.lastTime = 0;
                        return;
                    }
                    var timeNow = Date.now();
                    var elapsed = timeNow - this.lastTime;
                    if (elapsed > 0)
                    {
                        if (this.lastTime != 0)
                        {
                            if (elapsed > 1000) // Cap max elapsed time to 1 second to avoid death spiral
                            elapsed = 1000;
                            // Hackish fps smoothing
                            var smoothElapsed = (elapsed + this.prevElapsed + this.prevElapsed2)/3;
                            this.gameTick(0.001*smoothElapsed);
                            this.prevElapsed2 = this.prevElapsed;
                            this.prevElapsed = elapsed;
                        }
                        this.lastTime = timeNow;
                    }
                }
            }

Most of this code is what I don't understand, I can see he is recording the time elapsed between frames, but the rest of the code is lost to me.

On the website he uses the term singleton, which is used to prevent the program trying to update the same frame twice?

I have a bit of experience with the javascript syntax, but the concepts of singleton, and the general goal/function of this file is lost to me.

---

Why is the above code needed instead of just calling

requestAnimationFrame(function() {} );

Answer 1

The reason he uses bindThis is that he is passing a method into an anonymous function on the next line. If he merely used this.tick() , this would be defined as the context of requestAnimationFrame . He could achieve the same thing by using call or apply .

Singletons are classes that are only instantiated once. This is a matter of practice, and not a matter of syntax - javascript doesn't know what a singleton is. By calling it a "Singleton", he is merely communicating that this is a class that is instantiated only once, and everything that needs it will reference the same instance.