setInterval an object binden

[ThorstenM]

Hallo,

ich suche nun schon zwei Tage nach einer Lösung, leider ohne Erfolg. Mein Problem: Ich möchte eine Funktion mittels setInterval gleichzeitig auf mehrere HTML-Elemente anwenden. Aber ich tappe leider ziemlich im Dunkeln. So sieht’s bisher bei mir aus (vereinfacht, da das Skript zu groß ist):

  
meinObject(document.getElementById("DIV01"));  
meinObject(document.getElementById("DIV02"));  
  
meinObject = function(meinDIV) {  
 meinDIV.foo = 0;  
 meinDIV.interval = setInterval(blinking, 1000);  
  
 blinking = function() {  
  if(meinDIV.foo == 0) {  
   meinDIV.style.color = "yellow";  
   meinDIV.foo = 1;  
  } else {  
   meinDIV.style.color = "green";  
   meinDIV.foo = 0;  
  }  
 };  
};  

Knifflige Sache, aber vielleicht weiß ja trotzdem jemand Rat?

[molily]

Hallo,

meinObject(document.getElementById("DIV01"));

meinObject(document.getElementById("DIV02"));

meinObject = function(meinDIV) {
meinDIV.foo = 0;
meinDIV.interval = setInterval(blinking, 1000);

blinking = function() {
  if(meinDIV.foo == 0) {
   meinDIV.style.color = "yellow";
   meinDIV.foo = 1;
  } else {
   meinDIV.style.color = "green";
   meinDIV.foo = 0;
  }
};
};

  
Das sieht doch schon ganz gut aus.  
Allerdings solltest du blinking nicht als globale, sondern als lokale Variable notieren.  
Ansonsten wird nämlich bei beiden Aufrufen dieselbe blinking-Funktion ausgeführt. Sinn ist aber, dass du immer neue erzeugst, die jeweils das unterschiedliche meinDiv einschließen (Closures) und dadurch fortbestehen, dass du sie an setInterval übergibst.  
Objektorientiert würde man das noch ein wenig anders lösen, aber so gehts auch.  
  
Mathias

-- 
[SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)

[ThorstenM]

Hallo Mathias,

danke für Deine Hilfe. Leider klappt’s irgendwie immer noch nicht. Wenn ich das nur auf ein DIV anwende, läuft’s wunderbar. Aber bei zwei, streikt es. Das Ergebnis: Das zweite DIV wird grün und bleibt es. Offenbar wird foo gar nicht als Eigenschaft erkannt und auch nicht geändert.

Wie würde man das denn objektorientiert machen?

Gruß,
Thorsten.

[molily]

Hallo,

Also in deinem Code sehe ich nur einen Fehler, nämlich gehst du von einer umgekehrten Ausführungsreihenfolge der Befehle aus.

Siehe </archiv/2008/3/t167910/#m1095392>

var func = function () {...}; wird immer dort ausgeführt, wo die Anweisung steht, davor ist func nicht bekannt, erst darunter. Wenn du also so eine Funktion notierst, wie du es zweimal tust, dann kannst du diese erst danach aufrufen, nicht davor, wie du es zweimal tust.

Also entweder stellst du die Anweisungen um oder nutzt eine normale Funktions-Deklaration. function func () {...} wird nämlich zuerst ausgeführt, dann ist die Funktion bekannt. Man kann also func(); function func () {...} schreiben und trotzdem kann func ausgeführt werden.

Wie würde man das denn objektorientiert machen?

Na mit einem Konstruktor und Instanzen.

var b1 = new Blinker("DIV01");  
var b2 = new Blinker("DIV02");  
  
function Blinker (id)  {  
   this.element = document.getElementById(id);  
   this.state = true;  
   this.interval = window.setInterval(blinking, 1000)  
   var instance = this; // Variable mit Verweis auf die Instanz, die von der folgenden Funktion eingeschlossen wird. Sonst hätte sie keinen Zugriff auf die Instanz, weil setInterval sie in einem anderen Kontext ausführt.  
   function blinking () {  
      instance.element.style.color = instance.state ? "yellow" : "green";  
      instance.state = !instance.state;  
   }  
}

So könnte man noch Methoden start und stop hinzufügen, mit denen man das Blinken steuern könnte.

Mathias

[ThorstenM]

Jetzt hab ich’s. Mein Fehler war, dass ich die ganze Zeit nur mit einer Funktion gearbeitet habe. Stattdessen habe ich jetzt ein Objekt erstellt, welches die Funktion beinhaltet, und wende nun das Objekt auf das DIV an. So klappt’s endlich.

Danke!