How to access object classes from window.

[MrFish]

I'm making a browser fighting game that uses javascript to display the graphics. I've got an object called Character with several functions inside. One of the functions is displaceTween which moves the object of the character x, y from the original location. (in a tween fashion). Here is my character object (cleaned up)-

function Character(ally, spec){	//Variables		this.id = lastId;	lastId++;		this.isAlly = ally;	this.species = spec;	this.DOM = null;	this.wasAdded = false;	this.tweenInterval = null;		this.x = this.sX = 0;	this.y = this.sY = 0;		this.html = "";		this.head = 0;	this.torso = 0;	this.legs = 0;	this.shoes = 0;	this.left = 0;	this.right = 0;			if(this.isAlly)	{		//some stuff	}	else	{		//some stuff if false	}		//Modifiers		this.updateHtml = function()	{		//regenerates/creates the html information for this object	}		//Visibile Functions			this.addToField = function()	{		//adds the object html to the battle field	}		this.displace = function(x, y)	{				//displaces the object x/y from the current location.		this.x += x;		this.y += y;						this.DOM.style.left = this.x + "px";		this.DOM.style.top = this.y + "px";	}		this.moveTo = function(x, y)	{		//moves the object to x/y	}		this.displaceTween = function(x, y, time)	{		this.stepX = x/time;		this.stepY = y/time;				var object = this;				this.tweenInterval = setInterval("this.displace(this.stepX, this.stepY)", 10);		setTimeout("clearTimeout(this.tweenInterval)", time);	}}

my js terminal-

	 tom = new Character(true, 'human')	 tom.addToField()	 tom.displaceTween(100, 10, 1000)

Error-

Uncaught TypeError: Object [object DOMWindow] has no method 'displace'

The error is simple. setInterval is a DOMWindow function (and cannot be added to the object from my understanding). If I send it the information this.displace it's going to look for a function called "displace" inside the DOMWindow object. This is obviously a problem since it's not a DOMWindow function, it's a Character function. So one way I've gotten around it just for testing purposes is to change this.xxx to tom.xxx (tom being the name of the object) and it works. How can I get this to work they way I want it to.Another note is that the interval information must be inside quotation marks in order to create an animation from point A to point B.

[thescientist]

have you tried it without the quotes?

this.tweenInterval = setInterval(this.displace(this.stepX, this.stepY), 10);

[Ingolme]

It wouldn't work without the quotes. It would have to be like this:

setInterval(this.displace, 10);

You don't need to pass any parameters because you've already assigned stepX and stepY to the same object, so you can still access them from the other function:

this.displace = function()	{				//displaces the object x/y from the current location.		this.x += this.stepX;		this.y += this.stepX;						this.DOM.style.left = this.x + "px";		this.DOM.style.top = this.y + "px";}

[MrFish]

If you have every tried to create an animation with timeout and intervals you will realize you cannot do it without quotes. It will get the this right but it will jump to the end after the amount of time (not a smooth tween).

[Ingolme]

If you have every tried to create an animation with timeout and intervals you will realize you cannot do it without quotes. It will get the this right but it will jump to the end after the amount of time (not a smooth tween).

I always discourage passing strings to setTimeout or setInterval because it's far less efficient than passing a reference to a function because the parser has to evaluate the code (Just like with the eval() function).I don't see how an animation would be smoother when using a less efficient technique.

[justsomeguy]

Here's a modified version of Ext Core's Function.createDelegate method:

Function.prototype.createDelegate = function(obj, args, appendArgs){  var method = this;  return function() {  var callArgs = args || arguments;  if (appendArgs === true){    callArgs = Array.prototype.slice.call(arguments, 0);    callArgs = callArgs.concat(args);  }else if (!isNaN(parseInt(appendArgs, 10))){    appendArgs = parseInt(appendArgs, 10);    callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first    var applyArgs = [appendArgs, 0].concat(args); // create method call params    Array.prototype.splice.apply(callArgs, applyArgs); // splice them in  }  return method.apply(obj || window, callArgs);  };}

Using createDelegate, you can create a copy of your displace function that runs in a certain scope, namely the object:this.tweenInterval = setInterval(this.displace.createDelegate(this, [this.stepX, this.stepY]), 10);The documentation for Function.createDelegate is here:http://dev.sencha.com/deploy/dev/docs/?class=Function