nicht angemeldet
setTimeout() und setInterval in eigenen Objektmethoden
Hallo Forumsteilnehmer,
ich habe ein Problem, bei dem mir hoffentlich jemand helfen kann.
Ich habe über <DIV> einen Layer definiert, den ich selbsttätig über das Browser-Fenster sich bewegen lassen will. Da ich mehrere dieser Bereiche haben möchte, habe ich dafür ein eigenes Objekt erzeugt, das als interne (protected) Methode eine Function beinhaltet, die den Bereich bewegt.
Ich habe sowohl versucht, über setInterval("move()",100) außerhalb der function move() eine Art Thread zu initialisieren, als auch über setTimeout("move()",100) innerhalb von move() das gleiche zu erreichen. Beides funktioniert leider nicht, sondern gibt den Fehler "object expected" zurück. Arbeite ich nicht objektorientiert, funktioniert alles einwandfrei, aber dann muß ich die Bereiche jeweils von Hand einarbeiten.
Kennt jemand dieses Problem und eine mögliche Lösung oder einen Workaround?
Vielen Dank im Voraus
J-P
-
Hallo J-P.
Ich hatte genau das gleiche Problem, zumindest wenn ich Dich richtig verstanden habe.Probier mal das:
//das ist ebenfalls eine Methide Deines Objektes
function xxx()
{
var thisObject = this;setTimeout(function(){ thisObject.move() }, 100);
}-
Hallo J-P.
Ich hatte genau das gleiche Problem, zumindest wenn ich Dich richtig verstanden habe.Probier mal das:
//das ist ebenfalls eine Methide Deines Objektes
function xxx()
{
var thisObject = this;setTimeout(function(){ thisObject.move() }, 100);
}Hallo Fluffy
ich habe den Code jetzt umgestellt auf folgende version:
function move()
{
var thisObject = this;// Hier der Code für die Positionsänderung
setTimeout(function(){ thisObject.move() }, 100);
}Jetzt gibts keine Fehlermeldung mehr, aber leider bewegt sich auch nix :-(
Hab auch Varianten ausprobiert, hat aber alles nix geholfen. Irgendwelche Ideen, woran es liegen könnte?
Trotzdem vielen Dank für den Versuch
J-P-
Na dann versuchen wir es mal gemeinsam.Am besten Du postest erst mal den Code von Deinem DivObjekt damit ich mir das richtig anschauen kann.
-
Vielen Dank Fluffy,
sowohl für dein Angebot, als auch für deinen vorherigen Vorschlag. Der hat mich auf die richtigen Ideen gebracht, sodaß ich einen eigenen Workaround erarbeiten konnte. Danke vielmals.Damit andere auch was davon haben, stelle ich hier diesen Workaround zur Verfügung, das Problem könnte schließlich auch andere plagen, die objektorientiert in Javascript arbeiten wollen.
Das einzige was mich jetzt noch stört, daß ich vollständig auf Kapselung verzichten muß, also alle Methoden und Variablen public machen (sprich mit 'this.' deklarieren) muß.
Der folgende Code ist nicht wirklich auf Browser-Kompatibilität angelegt, sondern funktioniert primär mit dem IE (den Rest hab ich noch nicht getestet).
Hier nun der Code:
<html>
<head>
<script language="JavaScript">
<!--
function TestObj(id1,x,y){this.css = document.getElementById(id1);// Die CSS-atrribute des übergebenen Objekts werden zugänglich gemacht
this.objekt = id1+"B"; //Das Objekt bekommt einen eindeutigen Namen
eval(this.objekt + "=this;"); //Name und Objekt werden verknüpft
this.xpos=x;
this.ypos=y;
eval('this.css.style.top="'+ this.ypos +'"');
eval('this.css.style.left="'+ this.xpos +'"');this.move=function(){
this.xpos+=5; // Der Code für die
this.ypos+=5; // Objektbewegung
eval('this.css.style.top="'+ this.ypos +'"');
eval('this.css.style.left="'+ this.xpos +'"');setTimeout(this.objekt+".move();",50); //Durch diesen Aufruf funtioniert jetzt setTimeout()
}
}
-->
</script>
</head><body>
<!-- Hier werden zwei <div> Bereiche in unterschiedlichen Farben angelegt und mit einer ID versehen -->
<div id="test1" style="width:100px;height:100px;background:red;position:absolute;"></div>
<div id="test2" style="width:100px;height:100px;background:blue;position:absolute;"></div><script type="text/javascript">
<!--
// Hier werden 2 Objectinstanzen angelelegt und an den jeweiligen Startpunkt gelegt
obj1 = new TestObj('test1',100,100);
obj2 = new TestObj('test2',200,200);
// -->
</script><a href="javascript:obj1.move();// Aufruf der move-Methode">Starte den roten Block</a>
<br />
<a href="javascript:obj2.move();// Aufruf der move-Methode">Starte den blauen Block</a></body>
</html>===================================
Wenn noch jemand Anmerkungen, Verbesserungvorschläge oder sonstige Hinweise hat, wäre ich dankbar darüber.
Viel Spaß hiermit
J-P-
Hier nochmal, wie es mit meinem Vorschlag richtig geht. Keine Ahnung, warum bei Dir sich nix bewegt hatte. So läuft es auf alle Fälle.
<html>
<head>
<script language="JavaScript">
<!--
function TestObj(id1,x,y){this.css = document.getElementById(id1);// Die CSS-atrribute des übergebenen Objekts werden zugänglich gemacht
//hier fehlt jetzt was, da es nicht gebraucht wird
this.xpos=x;
this.ypos=y;
eval('this.css.style.top="'+ this.ypos +'"');
eval('this.css.style.left="'+ this.xpos +'"');this.move = move;//Funktion zuweisen
function move(){
this.xpos+=5; // Der Code für die
this.ypos+=5; // Objektbewegung
eval('this.css.style.top="'+ this.ypos +'"');
eval('this.css.style.left="'+ this.xpos +'"');var thisOb = this;
setTimeout(function(){ thisOb.move()},50);
}
}
-->
</script>
</head><body>
<!-- Hier werden zwei <div> Bereiche in unterschiedlichen Farben angelegt und mit einer ID versehen -->
<div id="test1" style="width:100px;height:100px;background:red;position:absolute;"></div>
<div id="test2" style="width:100px;height:100px;background:blue;position:absolute;"></div><script type="text/javascript">
<!--
// Hier werden 2 Objectinstanzen angelelegt und an den jeweiligen Startpunkt gelegt
obj1 = new TestObj('test1',100,100);
obj2 = new TestObj('test2',200,200);
// -->
</script><a href="javascript:obj1.move();// Aufruf der move-Methode">Starte den roten Block</a>
<br />
<a href="javascript:obj2.move();// Aufruf der move-Methode">Starte den blauen Block</a></body>
</html>Meines Wissens nach gibt's bei JavaScript doch sowieso keine richtige Datenkapslung, da private und protected bis jetzt nur reservierte Schlüsselworte sind und nicht verwendet werden. Berichtigt mich bitte, wenn ich hier Mist erzähle.
MfG
Fluffy
-
-
-
-