Jörg-Peter Friederich: setTimeout() und setInterval in eigenen Objektmethoden

Beitrag lesen

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