Script unterbrechen

[alex]

hallo,
ich bin gerade dabei eine Javascript-Slideshow für Bilder zu programmieren.
Ich wollte das ganze mit einer while-Schleife realisieren.
Hier der Code der Funktion:

function slideshow(){
 var slidestop=0;
 while(slidestop==0){
 if(curr_pic==last_pic){curr_pic=1;}
 else{curr_pic=++curr_pic;}
 setTimeout("window.document.op.src = curr_pic'.jpg'", 3000);
 }
}

die if...else Abfrage ist für mein Problem irrelevant. Ich will nur erreichen das die Schleife ,erst nachdem der setTimeout-Befehl ausgeführt wurde, fortgesetzt wird.

Mit dem jetztigen code bekomme ich immer eine Endlosschleife und mein Browser schmiert ab.

Bin für jede antowrt dankbar!!!

[Sven Rautenberg]

Moin!

function slideshow(){
 var slidestop=0;
 while(slidestop==0){
 if(curr_pic==last_pic){curr_pic=1;}
 else{curr_pic=++curr_pic;}
 setTimeout("window.document.op.src = curr_pic'.jpg'", 3000);
 }
}

die if...else Abfrage ist für mein Problem irrelevant. Ich will nur erreichen das die Schleife ,erst nachdem der setTimeout-Befehl ausgeführt wurde, fortgesetzt wird.

Klappt natürlich nicht, weil setTimeout nicht wartet, bis die genannte Zeit abgelaufen ist, sondern einen Code (den du als ersten Parameter angibst) per Timer (die Zeit gibst du im zweiten Parameter an) später ausführt und dann sofort in deiner Schleife weitermacht.

Du mußt umdenken. setTimeout und setInterval sind geeignete Funktionen, aber du mußt ihre Wirkungsweise verstehen. Sie verzögern die Ausführung des übergebenen Befehls (bzw. bei setInterval wird der Befehl regelmäßig wiederholt).

Bastel dir eine Funktion, die deine Grafik um ein Bild weiterschaltet. Diese Funktion kannst du mit setTimeout aufrufen (bzw. bietet sich eigentlich setInterval noch eher an). Dann definierst du noch eine globale Variable slidestop mit dem Defaultwert auf "Slideshow läuft". Deine Funktion fragt ab, ob laut dieser Variablen das Weiterschalten erlaubt ist, und macht es nur dann.

Mit einer weiteren kleinen Funktion bewirkt die Stop/Start-Taste, dass die globale Variable slidestop passende Werte erhält.

Dann fehlt dir eigentlich nur noch eine Liste (Array) mit allen Bildnamen, so dass du die Liste abarbeiten kannst.

Wichtig: setTimeout bzw. setInterval liefern einen Rückgabewert. Dieser wird benötigt, um den Timeout oder das Interval mit clearTimeout bzw. clearInterval zu löschen, damit keine weiteren Aufrufe erfolgen. Es ist durchaus sinnvoll, diesen Rückgabewert zu speichern.

Wahlweise könntest du auf die Variable slidestop verzichten und bei Betätigung der Stop-Taste einfach den Interval löschen - bei Start dann wieder neu setzen.

- Sven Rautenberg

[alex]

habs folgendermaßen gelöst:

function slideshow(){
 slidestop=0;
 while(slidestop==0){
 pic_slide();
 slidestop=1;
 }
}

function pic_slide(){
if(curr_pic==last_pic){curr_pic=1;}
else{curr_pic=++curr_pic;}
window.document.op.src = curr_pic+".jpg";
setTimeout("slideshow()", 3000);
}

Danke für den Tipp ;-)

[Sven Rautenberg]

Moin!

habs folgendermaßen gelöst:

Mächtig kompliziert, wie ich finde:

function slideshow(){
 slidestop=0;
 while(slidestop==0){
 pic_slide();
 slidestop=1;
 }
}

Diese Funktion kann man gewaltig eindampfen. Überleg mal selbst: slidestop wird auf Null gesetzt, dann kommt die while-Schleife. Es wird geprüft, ob slidestop Null ist, wenn ja, wird pic_slide() aufgerufen und slidestop auf Eins gesetzt. Die While-Schleife startet erneut und beendet sich dann auch sofort, weil slidestop jetzt Eins ist, nicht Null.

Mit anderen Worten: Die Schleife ist gar nicht notwendig, es reicht eigentlich auch eine IF-Abfrage.

Und genauer betrachtet fällt auf, dass absolut keinerlei Einflußfaktoren von außen wirken können: Du setzt slidestop zuerst so, dass die Schleife in jedem Fall einmal durchlaufen wird, und du setzt slidestop innerhalb der Schleife so, dass sie sofort nach dem ersten Durchlauf wieder abgebrochen wird.

Mit anderen Worten: Deine Funktion macht effektiv sowas:

function slideshow()
{
  pic_slide();
}

Sieht ziemlich simpel aus, oder? Und das ist es auch. Es ist sogar wahnsinnig überflüssig, denn ein Funktionsaufruf, der einfach nur dafür sorgt, eine weitere Funktion aufzurufen, kann problemlos ersetzt werden durch den direkten Aufruf der anderen Funktion.

Ok, das bringt uns direkt zu Funktion Nummer 2:

function pic_slide(){
if(curr_pic==last_pic){curr_pic=1;}
else{curr_pic=++curr_pic;}
window.document.op.src = curr_pic+".jpg";
setTimeout("slideshow()", 3000);
}

Hier wird die Arbeit geleistet. Die Funktion erhöht den Bilderzähler, sofern erlaubt, ändert daraufhin das angezeigte Bild und setzt einen Timeout, um sich selbst nach 3000 Millisekunden wieder aufzurufen - ich hab die nutzlose Funktion 1 mal rausgekürzt.

Was fehlt, ist eine Möglichkeit, die Slideshow zu stoppen.

Ich dachte da eher an sowas:

var slideshow_on = true; // Slideshow läuft
var curr_pic=1;
var last_pic=20; // oder was auch immer

var sliding = setInterval("pic_slide()", 3000);

function pic_slide()
{
  if (slideshow_on)
  {
    if(curr_pic==last_pic){curr_pic=1;}
    else{curr_pic=++curr_pic;}
    window.document.op.src = curr_pic+".jpg";
  }
}

Die Stopp-Taste kriegt dann onclick="slideshow_on=false;", die Start-Taste kriegt onclick="slideshow_on=true";

Und wenn dich stört, dass die Slideshow im schlimmsten Fall erst 2999 Millisekunden nach dem Klick auf Start weitergeht, dann ändere die Start- und Stoptasten so:

stop: onclick="clearInterval(sliding);"
start: onclick="sliding=setInterval('pic_slide()',3000);"

Du solltest aber dann irgendwas dagegen unternehmen, dass zwei oder mehr Slideshows gestartet werden, beispielsweise, indem du die Tatsache, dass eine Slideshow läuft, in einer Variablen festhälst.

- Sven Rautenberg