✔ setInterval übergibt Variablen der Funktion nicht

P

PHP-Fan

Erfahrenes Mitglied
Hallo,

ich habe folgendes Problem. Ich möchte gerne Bilder via onMouseOver und onMouseOut switchen. Das klappt auch soweit.

Code: 
<script type="text/javascript">

function SwitchImage(id, image) 
{  
  document.images["previews-" + id].src = "/preview/" + id + "_" + image + ".jpg";
	
  for (var i=2; i <=4; i++)
  {
    setInterval('SwitchImage(id, i)', 2000);
  }
}

function StandardImage(id)
{
  document.images["previews-" + id].src = "/preview/" + id + "_1.jpg";
}
</script>

Dies ist die Problemzone:

Code: 
  for (var i=2; i <=4; i++)
  {
    setInterval('ChangeImages(id, i)', 2000);
  }

Alle 2 Sekunden soll das Bild einer bestimmten ID gewechselt werden. Nur ist es da nicht mehr definiert. Sprich er ändert es einmal und sobald er in setInterval('ChangeImages(id, i)', 2000); reingeht, bekomme ich eine Fehlermeldung das id und i nicht definiert sein. Wieso?

Wenn ich mir die beiden Werte via alert direkt unter setInterval('ChangeImages(id, i)', 2000); ausgeben lasse, sehe ich die Werte aber. Irgendwas klappt da beim übergeben nicht.

Ich hoffe ihr könnt mir helfen.

Danke!
 
Zuletzt bearbeitet:
Gewöhnt dir ab sofort an, setInterval/Timeout keine Strings mehr, sondern anonyme Funktionen zu übergeben.

Javascript: 
for (var i=2; i <=4; i++)
{
	setInterval(function()
    {
		ChangeImages(id, i);
	}, 2000);
}

Jetzt hast du aber noch folgendes Problem: die Variable "i" verändert sich, deshalb würde jetzt drei mal die Funktion aufgerufen werden mit dem Wert 4. Deshalb musst du eine weitere anonyme Funktion einsetzen, um den Wert von i zu konservieren.

Javascript: 
for (var i=2; i <=4; i++)
{
	(function(i)
	{
		setInterval(function()
		{
			ChangeImages(id, i);
		}, 2000);
	})(i);
}


Edit: Um deine eigentliche Frage zu beantworten:

String literals are evaluated in the global context, so local symbols in the context where setTimeout was called will not be available when the string is evaluated as code.
Zum Vergrößern anklicken....
https://developer.mozilla.org/en/DOM/window.setTimeout#Passing_string_literals
 
Zuletzt bearbeitet:
Vielen Dank für die schnelle Antwort. JavaScript-Syntax ist wirklich furchtbar. Ich habe dein Codeschnipsel ausprobiert. Leider ist da anscheinend ein Fehler drin. Jetzt passiert das in folgender Reihenfolge:

1. Wenn ich mit der Maus über das Bild fahre wird es geändert (logisch, hat ja vorher auch funktioniert)
2. Nach 2 Sekunden kommt das nächste Bild (sehr gut, hat vorher nicht funktioniert), dann bleibt er aber bei dem Bild "stecken" und der Browser stürzt dann meistens ab nach ein paar Sekunden (insbesondere wenn ich über mehrere Bilder mit der Maus fahre). Woran liegt das?

Viele Grüße
 
Um das zu beantworten muss ich wissen:

-was ist "id"
-wie sieht ChangeImages aus
-wie sieht dein Markup aus

Edit: Ich vermute dein Problem beruht auf einem Missverständnis von setInterval. Wenn du in einer Schleife drei mal setInterval aufrufst, dann wird deine Funktion drei mal alle zwei Sekunden. Du brauchst keine Schleife, sondern musst innerhalb von ChangeImages den Zähler hochsetzen.
 
Zuletzt bearbeitet:
ID = ID des Datensatzes
Image = Bild des Datensatzes (gibt immer 1-4).

ID 400 und Bild 2 (was als erstes beim Mouseover angezeigt wird)

400_2.jpg

Als Beispiel nun ID 400, mit Bild 3, was als nächstes nach x Sekunden erscheinen soll.

400_3.jpg.

Aufgerufen wird das ganze so:

Code: 
<img src="/previews/<?php echo $aRowVideoDetails['id']; ?>_1.jpg" width="160" height="120" name="previews-<?php echo $aRowVideoDetails['id']; ?>" onMouseOver="javascript:SwitchImage(<?php echo $aRowVideoDetails['id']; ?>, 2)" onMouseOut="javascript:StandardImage(<?php echo $aRowVideoDetails['id']; ?>)"><br />

Der Code sieht komplett nun so aus:

Code: 
<script type="text/javascript">

function SwitchImage(id, image) 
{  
  document.images["previews-" + id].src = "/previews/" + id + "_" + image + ".jpg";
  
  for (var i=2; i <=4; i++)
  {
    (function(i)
    {
        setInterval(function()
        {
            SwitchImage(id, i);
        }, 1000);
    })(i);
  }
}

function StandardImage(id)
{
  document.images["previews-" + id].src = "/previews/" + id + "_1.jpg";
}
</script>

Das erste Bild wird ja immer geändert, also in die Funtion geht er auf jedenfall und die Parameter werden auch übergeben.

Danke für die Hilfe.
 
CPoly hat gesagt.:
Edit: Ich vermute dein Problem beruht auf einem Missverständnis von setInterval. Wenn du in einer Schleife drei mal setInterval aufrufst, dann wird deine Funktion drei mal alle zwei Sekunden. Du brauchst keine Schleife, sondern musst innerhalb von ChangeImages den Zähler hochsetzen.
Zum Vergrößern anklicken....

Der Hinweis sieht ganz plausibel aus. Ich habe das ganze geändert. In das:

Code: 
function SwitchImage(id, image) 
{  
  document.images["previews-" + id].src = "/previews/" + id + "_" + image + ".jpg";
  
  var i=2
  if (i < 5)
  {
    (function(i)
    {
        setInterval(function()
        {
            SwitchImage(id, i);
			i++;
        }, 1000);
    })(i);
  }
}

Jetzt ändert er die Bilder zwar alle, aber in Abständen von 2-3 Sekunden und irgendwann hängt er sich dann wieder auf. Wir sind nah dran aber irgendwas will da immernoch nicht.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück