Eine Funktion (Endlosschleife) soll x sekunden laufen

[asyoulikeit]

Hallo liebe Leute, bin noch ziemlicher javascript Anfänger und hab mir ein paar Übungsaufgaben gesucht. Also bitte nicht wundern, dass das hier keinen wirklichen praktischen Nutzen hat, es ist nur zum Üben.

Ich habe eine Funktion, die in einer Endlosschleife immer wieder das gleiche macht. Diese Funktion soll genau 10 Sekunden laufen und dann abbrechen. Und hier stehe ich auf dem Schlauch. Ich finde überall im Netz etwas dazu, wie ich eine Funktion dazu bringe, alle paar Sekunden weiter zu laufen, oder nach soundsoviel Sekunden Verzögerung zu starten. Aber nichts zu dieser Aufgabenstellung.
Ich denke, dass auch das wohl mit setTimeout zu machen sein müsste, aber ich komm einfach nicht drauf.

Mit

function start() {
window.setTimeout('start_spiel()',10000);
}

startet das "Spiel" nach 10 Sekunden. Aber wie bekomme ich es dazu sofort zu starten und nach 10 Sekunden aufzuhören?
Hilfe wäre großartig, Denkanstoß auch nicht schlecht.

 

[j-l-n]

Prüfe doch mit einer if-Abfrage, ob eine Variable "true" ist und führe immer nur dann den Code aus. Und nach 10 Sekunden rufst du per Timeout eine Funktion auf, die dir die Variable auf "false" setzt.

 

[kkapsner]

Solche Schleifen sind in JS komplett nutzlos, da sie den Browser komplett einfrieren lassen und du dann nichts machen kannst. Deswegen findest du im Netz auch nichts dazu.

Mach' dich mit dem Eventkonzept des DOM vertraut, dann brauchst du solche Schleifen nicht.

@Julian: dein Vorschlag funktioniert nicht, da die Endlosschleife auch die Ausführung des Callbacks im window.setTimeout() blockt.
Aber wie man solche Schleifen machen kann, schreib' ich jetzt nicht, da sie wirklich komplett nutzlos sind.

 

[asyoulikeit]

Hallo kkapsner,

leider hilft mir diese Antwort gar nicht weiter, denn die Aufgabenstellung lautet nun mal, eine Funktion 10 Sekunden lang laufen lassen und dann zu stoppen. Warum soll das auch nutzlos sein? Ich stell mir z.B. eine Slideshow vor, die erst automatisiert abläuft und nach einer bestimmten Zeit bei einem Bild stehen bleibt. Oder ein Glücksrad, dass nach einer zufällig bestimmten Zeit stehen bleibt. Eben ohne, dass man ein Event auslöst, also einen Klick oder so was, oder gibt es für einen Zeitraum auch einen Eventhandler? Dann habe ich den noch nicht gefunden und wäre für einen Tipp dankbar.

Die Grundfunktion habe ich ja auch hinbekommen (ist tatsächlich eine Art Glücksrad, es werden die Zahlen von 1-10 in zufälliger Reihenfolge durchlaufen und es soll die Zahl ausgegeben werden, die nach 10 Sekunden "dran" wäre). Aber ich weiß halt nicht, wie ich sie anhalten soll, ohne eben irgendwohin zu klicken.

 

[tsseh]

oder gibt es für einen Zeitraum auch einen Eventhandler? Dann habe ich den noch nicht gefunden und wäre für einen Tipp dankbar.

ja, den hast du doch schon gefunden, setTimeout löst nach einer vorgegebenen zeit ein event aus ruft das übergebene callback.

Die Grundfunktion habe ich ja auch hinbekommen (ist tatsächlich eine Art Glücksrad, es werden die Zahlen von 1-10 in zufälliger Reihenfolge durchlaufen und es soll die Zahl ausgegeben werden, die nach 10 Sekunden "dran" wäre).

dann zeig diese doch mal, denn wenn...

Aber ich weiß halt nicht, wie ich sie anhalten soll, ohne eben irgendwohin zu klicken.

...du sie durch einen klick anhalten kannst, kann es keine endlosschleife sein.
auch würde dann der browser meckern, mit einer box in der er dich darauf hinweist, dass dein js zu lange läuft.
wärend die box angezeigt wird könnte sich glaube ich zwar wieder ein eventhandler zwischenmogeln, aber allein durch die box, die dein js unterbricht, kannst du sowieso nicht deine 10 s laufzeit einhalten

 

[kkapsner]

Animationen können mit solchen Endlosschleifen nicht realisiert werden, da die graphischen Änderungen während der Schleife nicht angezeigt werden. Du hättest also nur einen Browser, der nicht reagiert und auch seine Darstellung nicht ändert (und, wie hesst schon gesagt hat, mit einer Browserwarnung, dass das Skript zu lange läuft - wobei da dann ein mal die Darstellung aktualisiert wird...).

In JS macht man Animationen indem man lauter kleine Zwischenschritte mit window.setTimeout() oder window.requestAnimationFrame() realisiert. Also wenn du 10s etwas animieren willst, machst du während der Zeit lauter window.setTimeout()s mit immer ~20ms dazwischen (oder du nimmst gleich window.setInterval()).
Hat auch den Vorteil, das man die CPU nicht so belastet.

@hesst: ich würde ja nicht sagen, dass window.setTimeout() ein Event auslöst. Man kann ja kein "timeout"-Event registrieren, das bei jedem Timeout geworfen wird... wobei das an die Eventloop gekoppelt ist... hm. Aber für einen Anfänger würd' ich das so formulieren "Es führt den Callback nach der ungefähren Wartezeit aus".

 

[asyoulikeit]

Entschuldigt, dass ich mich erst jetzt wieder melde, aber ich beschäftige mich mit Javascript nur privat und hatte leider keine Zeit.

Dann habe ich mich wahrscheinlich falsch ausgedrückt. Eine Schleife ist für mich alles, was sich wiederholt, für Euch anscheinend nur for und while-Schleifen.

Ich mache ja genau wie von Dir vorgeschlagen die Zwischenschritte mit window.setTimeout und die Funktion ruft sich selbst wieder auf. Das Durchzählen funktioniert problemlos, ich krieg's nur nicht angehalten. Ich verstehe auch Deine Angabe mit den 20ms Schritten. Aber wie sag ich ihm, das nach 200 Schritten Schluss sein soll? Eine For-Schleife innerhalb dieser window.setTimeout Schritte funktioniert ja nicht.

 

[kkapsner]

Das Durchzählen funktioniert ja anscheinden. Dann kannst du doch das nächste window.setTimeout() einfach nur dann aufrufen, wenn der Zähler unter 200 ist.

Aber zeig' uns doch einfach mal deinen Code.