JavaScript循环无法正常运行（FRAME UPDATE LOOP）

Question

当我尝试运行以下代码时，在控制台日志上，我得到“ Done !!”，而不是

设置currentFrame = 0

sourceX = 0

假定有一个计数器，间隔为300毫秒，并更新“ currentFrame”和“ sourceX”变量。 但是，条件是真实的，除了“ Done !!”之外，它什么都不输出。

• 注意：是的，页面上的所有元素均已正确加载

以下是我的代码：

            var canvas = document.querySelector("canvas");
            var drawingSurface = canvas.getContext("2d");
            var tileSheet = new Image();
            tileSheet.src="frames.png";

            var msperFrame = 300;

            var interval;
            SIZE=128;

            tileSheet.addEventListener("load",loadHandler,false);

            var monster={
                frames:6,
                SIZE:128,
                currentFrame:0,
                sourceX:0,
                sourceY:0,
                updateAnimation: function(){
                    var self=this;
                    if(self.currentFrame <= self.frames){
                        self.sourceX = self.currentFrame*this.SIZE;
                        console.log("Current Frame: "+self.currentFrame+"\nSourceX: "+self.sourceX);
                        self.currentFrame++;
                        render();
                    }else{
                        console.log("Done!!");
                        window.clearInterval(interval);
                    }
                }
            };

            function loadHandler(){
                interval = window.setInterval(monster.updateAnimation,msperFrame);
            }

            function render(){
                drawingSurface.drawImage(tileSheet,
                monster.sourceX,monster.sourceY,monster.SIZE,monster.SIZE,
                0,0,monster.SIZE,monster.SIZE);
            }

Answer 1

现在，这是一个有趣的错误:-)

您的问题是this ：当通过setTimeout或setInterval运行时，它默认为window而不是monster 。 尝试这个：

interval = window.setInterval(function(){monster.updateAnimation();},msperFrame);

通过将其包装在匿名函数中，应该没问题。 您将获得“完成！” 因为if (window.currentFrame <= window.frames)中的两个属性均未定义。

旁注：

您正在使用this.SIZE而不是self.SIZE 。

每个渲染循环300 ms可能会产生大块的动画。

Answer 2

window.setInterval(monster.updateAnimation,msperFrame);

实际上将被翻译成

window.setInterval(function(){
                var self=this; //here 'this' is window
                if(self.currentFrame <= self.frames){
                    self.sourceX = self.currentFrame*this.SIZE;
                    console.log("Current Frame: "+self.currentFrame+"\nSourceX: "+self.sourceX);
                    self.currentFrame++;
                    render();
                }else{
                    console.log("Done!!");
                    window.clearInterval(interval);
                }
            },msperFrame);

此函数将从global范围或window范围运行。 因此， this将是window对象。

当你做

window.setInterval(function(){monster.updateAnimation();},msperFrame);

正如@erik建议的那样http://jsfiddle.net/Vn3s7/

function(){monster.updateAnimation();}

将在window范围内运行。 由于monster是可以作为global的window范围内，“moster.updateAnimation”可用，并且将被用this指针作为monster本身。