Question

I am attempting to create an endless prototype function. Here is my attempt, which is not working:

function Cat(name, direction) {
this.name = name;
this.stand = {left: "images/standLeft.png", right: "images/standRight.png"};
this.walk = {left: "images/walkLeft.gif", right: "images/walkRight.gif"};
this.direction = direction;
}

Cat.prototype.walking = function() {
var myDirection = (this.direction == "right" ? "+=": "-=");
var myPosition = $("#cat").css("left");
myPosition = myPosition.substring(0, myPosition.length - 2);

var distanceLeft = myPosition;
var distanceRight = 1024 - myPosition - 173;


if(this.direction == "right") {
    var distance = distanceRight;
} else {
    var distance = distanceLeft;
}
    $("#cat img")[0].src =  this.walk[this.direction];
    $("#cat").animate({
        left: myDirection + distance
        }, (22.85 * distance), function(){
            this.direction = (this.direction == "right" ? "left": "right");
             this.walking();
        });
}

var myCat = new Cat("Izzy", "right");

I thought calling (this.walking()) would run the same function again with the same object, however it is throwing an error. Any thoughts or suggestions?

Answer 1

this there will be window scope.

$("#cat img")[0].src =  this.walk[this.direction];
var that = this;
$("#cat").animate({
    left: myDirection + distance
    }, (22.85 * distance), function(){
        that.direction = (that.direction == "right" ? "left": "right");
         that.walking();
    });