Ergebnis 1 bis 4 von 4
  1. #1
    Macks ist offline Grünschnabel
    registriert
    16-09-2011
    Beiträge
    7

    Hilfe! Mehrere Timer (Countdowns) gleichzeitig

    Liebes jswelt-Forum,


    ich versuche schon den ganzen Tag ein Script zu schreiben, das es mir ermöglicht, mehrere Timer (Countdowns) parallel und unabhängig voneinander starten und laufen zu lassen.

    Beispielhafter Anwendungszweck: man hat mehrere Pizzaöfen mit verschiedenen Pizzen darin. Diese brauchen unterschiedlich lang und werden zu unterschiedlicher Zeit in unterschiedliche Öfen geschoben.

    Hier ist mein Script, das mir dies ermöglichen und beim Ablauf der Timer individuelle Sounds (die auf dem Server hinterlegt sind) abspielen soll. Das funktioniert, nur laufen die Counter nicht parallel ab. Ich habe versucht das über Variablen und Arrays zu lösen, aber scheinbar ist das der falsche Ansatz:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Ofen Timer</title>
    <SCRIPT LANGUAGE = "JavaScript">
    <!--
    //Javascript:
    function playSound(url) {
    	document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
    }  
    
    var secs
    var timerID = new Array();
    var timerRunning = new Array();
    var delay = 1000
    var ofentype
    
    function InitializeTimer(ofen)
    {
        // Set the length of the timer, in seconds
        ofentype = ofen
        if (ofentype == "ofeneins") {
        	secs = 10
        }
        if (ofentype == "ofenzwei") {
        	secs = 15
        }
        StopTheClock(ofen)
        StartTheTimer(ofen)
    }
    
    function StopTheClock(ofen)
    {
        if(timerRunning[ofen])
            clearTimeout(timerID[ofen])
        timerRunning[ofen] = false
    }
    
    function StartTheTimer(ofen)
    {
        if (secs==0)
        {
            playSound(ofen + ".wav")
            StopTheClock(ofen)
            // Here's where you put something useful that's
            // supposed to happen after the allotted time.
            // For example, you could display a message:
            document.getElementById(ofen).value = ofen + " ist fertig."
        }
        else
        {
            document.getElementById(ofen).value = secs
            secs = secs - 1
            timerRunning[ofen] = true
            timerID[ofen] = self.setTimeout("StartTheTimer()", delay)
        }
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <form name="counter" method="post" action="">
    <h2>Ofen Eins</h2>
    <input type="text" size="8" 
    id="ofeneins" value="10" /><a onclick="InitializeTimer('ofeneins')">Start</a>
    <h2>Ofen Zwei</h2>
    <input type="text" size="8" name="ofenzwei" id="ofenzwei" value="15" /><a onclick="InitializeTimerofenzwei('ofenzwei')">Start</a></form> 
    <div id="sound"></div>
    </body>
    </html>
    Der Code ist aus verschiedenen Tuts (wie man noch an den Comments sieht) zusammengesucht und modifiziert worden.

    Das Script in Aktion: http://macksit.de/ofentimer.htm (getestet mit Google Chrome)

    Meine Frage lautet: wie kann ich es verhindern, für jeden Ofen (es werden viele mit individuellen Namen sein) eigene Funktionen schreiben zu müssen?

    Ich habe bereits ein wenig mit variablen Arrays herumgespielt, aber irgendwie haut das nicht hin. Ich habe gute PHP-Kenntnisse, aber Javascript ist für absolutes Neuland… daher ist auch die Idee, dass mehrere Prozesse nebeneinander ablaufen etwas krass für mich.

    Ich glaube, man müsste verschiedene Instanzen von Funktionen dynamisch erschaffen, damit sich die Funktionen und Variablen nicht in die Quere kommen. Die Namen bzw. Bezeichnungen sollen durch

    Code:
    <a onclick="InitializeTimer('ofenzwei')">Start</a>
    <a onclick="InitializeTimer('ofeneins')">Start</a>
    <a onclick="InitializeTimer('ofenmitmaedchennamen')">Start</a>
    <a onclick="InitializeTimer('ofenkarl')">Start</a>
    (beispielhaft)

    übergeben werden, um das Script möglichst flexibel zu halten.

    Versteht mich jemand und kann mir weiterhelfen?

    Vielen Dank im Voraus.


    Liebe Grüße

    Macks
    Geändert von Macks (16-09-2011 um 18:38 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.672

    AW: JS Anfänger benötigt Hilfe beim Programmieren parallel-laufender Timer (Countdown

    1. Das language-Attribut ist veraltet -> type="text/javascript"
    2. Du darfst bei deinem Problem auf keinen Fall mit globalen Variablen arbeiten.
    3. window.setTimeout sollte man nicht mit einem String als Parameter aufrufen, sondern mit einer Funktionsreferenz - in deinem Fall bietet sich eine anonyme Funktion an.
    4. Du verlierst deinen Funktionsparameter beim setTimeout.
    5. Man sollte auch in JS jede Codezeile mit einem ; abschließen
    6. Fehlerkonsole (Wo finde ich die Fehlerkonsole?)!
    7. setTimeout ist nicht besonders genau - wenn du etwas willst, auf das du dich verlassen kannst, musst du mit dem Date-Objekt arbeiten.
    8. Man sollte in JS auch die Array-Literale verwenden ("[]").
    9. Für was ist die Variable ofentype gut?
    10. Entscheide dich: Englisch oder Deutsch.

  3. #3
    Macks ist offline Grünschnabel
    registriert
    16-09-2011
    Beiträge
    7

    AW: JS Anfänger benötigt Hilfe beim Programmieren parallel-laufender Timer (Countdown

    Vielen Dank für deine Unterstützung und die wertvollen Hinweise. Ich habe es geschafft, das Ding zum Laufen zu bringen. Testausgaben sind auch in Javascript ein wertvolles Mittel.

    Hier der Code, mit dem es funktioniert:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Ofen Timer</title>
    <script type="text/javascript">
    <!--
    function playSound(url) {
    	document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
    }  
    
    var secs = new Array();
    var timerID = new Array();
    var timerRunning = new Array();
    var delay = 1000;
    var ofentype;
    
    function InitializeTimer(ofen) {
    	//alert('InitializeTimer fuer ' + ofen + ' laeuft');
        if (ofen == "ofeneins") {
        	secs[ofen] = 10;
        }
        if (ofen == "ofenzwei") {
        	secs[ofen] = 15;
        }
        StopTheClock(ofen);
        StartTheTimer(ofen);
    }
    
    function StopTheClock(ofen) {
    	//alert('StopTheClock fuer ' + ofen + ' laeuft');
        if(timerRunning[ofen])
            clearTimeout(timerID[ofen]);
        timerRunning[ofen] = false;
    }
    
    function StartTheTimer(ofen) {
    	//alert('StartTheTimer fuer ' + ofen + ' laeuft');
        if (secs[ofen]==0) {
            playSound(ofen + ".wav");
            StopTheClock(ofen);
    
            document.getElementById(ofen).value = secs[ofen];
        }
        else {
            document.getElementById(ofen).value = secs[ofen];
            secs[ofen] = secs[ofen] - 1;
            timerRunning[ofen] = true;
            timerID[ofen] = window.setTimeout(function () {
       StartTheTimer(ofen);
    }, 1000);
        }
    }
    //-->
    </script>
    </head>
    <body>
    <form name="counter" method="post" action="">
    <h2>Ofen Eins</h2>
    <input type="text" size="8" 
    id="ofeneins" value="10" /><a onclick="InitializeTimer('ofeneins')">Start</a>
    <h2>Ofen Zwei</h2>
    <input type="text" size="8" name="ofenzwei" id="ofenzwei" value="15" /><a onclick="InitializeTimer('ofenzwei')">Start</a></form> 
    <div id="sound"></div>
    </body>
    </html>
    Geändert von Macks (17-09-2011 um 17:26 Uhr)

  4. #4
    Avatar von Dormilich
    Dormilich ist offline Kaiser
    registriert
    15-01-2010
    Beiträge
    1.288

    AW: Hilfe! Mehrere Timer (Countdowns) gleichzeitig

    Zitat Zitat von Macks Beitrag anzeigen
    Meine Frage lautet: wie kann ich es verhindern, für jeden Ofen (es werden viele mit individuellen Namen sein) eigene Funktionen schreiben zu müssen?
    dieses Prinzip nennt sich Datenkapselung und läßt sich in (fast?) allen objektorientierten Sprachen (wozu auch JavaScript zählt) mit Hilfe von Objekten lösen (um es mal ganz allgemein zu sagen).

Ähnliche Themen

  1. Anfänger benötigt Hilfe!
    Von sensimillia im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 01-05-2009, 12:50
  2. Anfänger in Javascript benötigt Hilfe
    Von tombone im Forum JavaScript
    Antworten: 8
    Letzter Beitrag: 17-04-2009, 16:52
  3. Newsticker mit PHP/MySQL/JS/AJAX - Anfänger benötigt Hilfe
    Von Popopinsel im Forum Serverseitige Programmierung
    Antworten: 10
    Letzter Beitrag: 03-03-2009, 15:28
  4. Anfänger auf abwegen benötigt Hilfe
    Von escape im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 10-09-2008, 14:05
  5. mehrere Countdowns parallel
    Von Chimmy im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 28-01-2005, 18:53

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •