✔ useless setInterval call (missing quotes around argument?)

W

walle_89

Mitglied
Moin moin!
Ich quäle mich schon seit Längerem mit diesem einen miesen Fehler. Dieser wird durch die folgende Zeile verursacht.
HTML: 
this.intervalId = setInterval(this.draw(), 10);
Im Grunde genommen müsste ich den Ausdruck bzw. die Methode in Anführungszeichen schreiben und es müsste dann funktionieren - doch es tut es nicht (bzw. "this.draw is not a function"). Dazu ein kurzer Auszug aus meinem Geschriebenen.
HTML: 
	this.shoot = function()
	{
		if(this.intervalId == null)
		{
			this.intervalId = setInterval(this.draw(), 10);
			return true;
		}
		else
		{
			throw new Error("Interval already set!");
			return false;
		}
	};

	this.draw = function()
	{
		this.clear();
		this.drawBall(this.xBall, this.yBall, this.rBall);
		this.drawGoalkeeper(this.xGk);
		if(this.yBall+this.dyBall-this.rBall <= this.yLimit-this.rBall || this.xBall+this.dxBall-this.rBall <= this.xLimit)
		{
			this.dxBall = 0;
			this.dyBall = 0;
			if(this.drBall > 0) this.rBall = this.drBall;
			this.drBall = 0;
			clearInterval(this.intervalId);
		}
		else
		{
			this.rBall += this.drBall;
			this.xBall += this.dxBall;
			this.yBall += this.dyBall;
		}
	};
Ich rufe in HTML die Methode shoot(), damit diese dann die Methode draw() in einem Interval ablaufen lässt. Aber da scheint noch ein Syntaxfehler zu sein - deshalb bitte ich sie alle um Hilfe! ;)
Grüße
 
Moin,

schreibs mal so:
Code: 
this.shoot = function()
  {
    if(this.intervalId == null)
    {
      var _this=this;
      this.intervalId = setInterval(function(){_this.draw();}, 10);
      return true;
    }
    else
    {
      throw new Error("Interval already set!");
      return false;
    }
  };

Interessant ist für dich, wenn dich das Warum interessiert, das Wörtchen "closures" ....google liefert dir da sicher Interessantes :)
 
Hallo!
Ich habe mir schon einige Lektüren durchgeselen, aber die Closures wollen immer nicht so wie ich. Beispiel:
index.htm
HTML: 
<head>
<script type="text/javascript" src="penalty.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
var color = {
	ball: {
		fill: "blue",
		stroke: "black"
	}
};
var format = {
	ball: {
		type: "circle",
		x: 200,
		y: 400,
		radius: 30,
		startAngle: 0,
		endAngle: Math.PI*2,
		clockwise: false
	}
};
var object = {
	ball: {color: color.ball, format: format.ball}
};

try	{
	window.onload = function()
	{
		var penaltyGame = new PenaltyGame($('field'), object);
	}
} catch(error) {
	alert(error.name + "\n" + error.message + "\n" + error.fileName + " (" + error.lineNumber + ")");
}

-->
</script>
</head>

penalty.js
HTML: 
function PenaltyGame(canvas, object)
{
	this.ctx;
	var thisObj = this;

	this.init = function()
	{
		if(canvas.getContext)
		{
			thisObj.ctx = canvas.getContext('2d');
			if(!thisObj.draw(object))
			{
				throw new Error("Objects could not be drawn!");
			}
		}
		else
		{
			throw new Error("Canvas could not get initialised!");
		}
	}; this.init();

	this.draw = function(obj, /*optional*/ limit)
	{
		for(var prop in obj)
		{
			if(prop.format.type != limit) break;
			// Select different methods for different objects
			switch(prop.format.type)
			{
				case "circle":
					break;
				case "rectangle":
					thisObject.ctx.beginPath();
					thisObject.ctx.moveTo(prop.format.xMin, prop.format.yMin);
					thisObject.ctx.lineTo(prop.format.xMin, prop.format.yMax);
					thisObject.ctx.moveTo(prop.format.xMin, prop.format.yMin);
					thisObject.ctx.lineTo(prop.format.xMax, prop.format.yMin);
					thisObject.ctx.lineTo(prop.format.xMax, prop.format.yMax);
					thisObject.ctx.closePath();
					thisObject.ctx.stroke(prop.color.stroke);
					thisObject.ctx.fill(prop.color.fill);
					break;
				default:
					throw new Error("Such type of object is unknown!");
					break;
			}
		}
	};
}

Problem
Fehler: thisObj.draw is not a function
Quelldatei: http://localhost/canvas/penalty.js
Zeile: 11

Überlegung
Ok, anscheinend findet thisObj zur Laufzeit keine Funktion draw() => thisObj hat eine falsche Referenz. Das geschieht aber auch, wenn ich ein einfaches this verwende. Es ist doch aber auch so, dass this.init() zur Laufzeit thisObj quasi abspeichert und es so dem Scope (?) zur Verfügung stellen kann?

Kann mir dann bitte jmd. das etwas genauer mit den Closures und Scope erklären? Zumindest wie ich die Referenzen setzen muss, damit die Methoden zur Laufzeit auf den richtigen Speicher im System zeigen? Danke schonmal vielmals!
 
Hi,

ich denke, dass es sich nicht um ein "closure"- oder "scope"-Problem handelt. Vielmehr dürfte die Methode draw einfach noch nicht bekann sein, wenn sie aufgerufen wird.

Änder mal die Reihenfolge derart, dass draw vor init notiert ist:
Code: 
function PenaltyGame(canvas, object)
{
	this.ctx;
	var thisObj = this;

	this.draw = function(obj, /*optional*/ limit)
	{
          // ...
	};

	this.init = function()
	{
          // ...
	}; 
        this.init();
}

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück