# Endlosschleife Countdown



## SpecialFighter (10. April 2015)

Hallo zusammen,

ich nutze folgendes Countdown Script: http://www.littlewebthings.com/projects/countdown/

Mein Quellcode sieht so aus:

```
<?php
header('Content-Type: text/html; charset=utf-8');
ini_set('session.use_cookies',1);
ini_set('session.use_only_cookies',1);
ini_set('session.use_trans_sid',0);
session_start();       


if (!isset($_SESSION['timestamp']))
    {
        $_SESSION['timestamp'] = 1428417830;
    }


if ( (time() - $_SESSION['timestamp']) >= 15 )
    {                                               
        $_SESSION['timestamp'] = time()+15;
    }

                    
$_SESSION['datum'] = date("d.m.Y",$_SESSION['timestamp']);
$datum_array = explode(".", $_SESSION['datum']);
                
$_SESSION['uhrzeit'] = date("H:i:s",$_SESSION['timestamp']);
$uhrzeit_array = explode(":", $_SESSION['uhrzeit']);                   
    
?>

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        .dash .digit {     float: left;  }
    </style>
</head>

<body class="home page page-id-26 page-template page-template-tmp-no-title-php">
    <div id="countdown_dashboard">
        <div class="dash minutes_dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
        </div>           
        <div style="float: left;">:</div>
        <div class="dash seconds_dash">
            <div class="digit">0</div>
            <div class="digit">0</div>
        </div>
    </div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="countdown.js"></script>


<script language="javascript" type="text/javascript">
           
            jQuery(document).ready(function() {
            var day = <? echo $datum_array[0]; ?>;
            var month = <? echo $datum_array[1]; ?>;
            var year = <? echo $datum_array[2]; ?>;
            var hour = <? echo $uhrzeit_array[0]; ?>;
            var min = <? echo $uhrzeit_array[1]; ?>;
            var sec = <? echo $uhrzeit_array[2]; ?>;
           
           
                    jQuery('#countdown_dashboard').countDown({
                                targetDate: {
                                        'day':             day,
                                        'month':     month,
                                        'year':             year,
                                        'hour':         hour,
                                        'min':             min,
                                        'sec':             sec
                                    },
                   
                                // onComplete function
                                onComplete: function() {
                                        alert ('Fertig!')
                                    }
                                })
                    });
        </script>
   
</body>
</html>
```

Wie müsste der Code aussehen,
damit der Countdown immer wieder von vorne beginnt, wenn dieser durchgelaufen ist?
Im Moment kommt ja immer ein alert "Fertig!"

Vielen Dank schon Mal


----------



## Sempervivum (10. April 2015)

Wie willst Du denn die Zielzeit festlegen für den nächsten Countdown? Eine Stunde weiter? Einen Tag weiter?
Die Wiederholung müsste sich mit einem rekursiven Funktionsaufruf realisieren lassen, etwa so:

```
function myCountdown() {
                    jQuery('#countdown_dashboard').countDown({
                                targetDate: {
                                        'day':             day,
                                        'month':     month,
                                        'year':             year,
                                        'hour':         hour,
                                        'min':             min,
                                        'sec':             sec
                                    },
                  
                                // onComplete function
                                onComplete: function() {
                                        // Hier die neue Zielzeit festlegen
                                        myCountdown();
                                    }
                               });
myCountdown();
```
Edit: Wenn ich mir vor Augen halte, dass Du die Zielzeit mit PHP ermittelst, könnte ich mir vorstellen, dass Du die neue Zeit wieder vom Server holen willst. Dann wäre es am einfachsten, wenn Du die Seite im onComplete neu lädst mit der Javascript-Funktion reload().


----------



## SpecialFighter (11. April 2015)

also im Endeffekt, geht es mir testweise erst Mal nur darum, dass ich einen Countdown habe, welcher von 10 sek anfängt herunter zu zählen,
bei 0 sek wieder von 10 sek beginnt => Endlosschleife.
Und der Countdown darf sich durch einen Reload der Seite nicht unterbrechen lassen bzw, darf nicht von vorne beginnen sondern muss da weitermachen, wo dieser unterbrochen wurde


----------



## Sempervivum (11. April 2015)

Wenn das so ist, verwendest Du besser die TagetOffset-Option:

```
targetOffset: {
36  'day':  0,
37  'month':  0,
38  'year':  0,
39  'hour':  0,
40  'min':  0,
41  'sec': 10
42  }
```
Wenn der Countdown beim Neuladen nicht neu beginnen soll, müsstest Du den Zählerstand z. B. in einem Cookie speichern.


----------



## SpecialFighter (11. April 2015)

aber so würde er ja nicht immer wieder neu zählen oder?


----------



## Sempervivum (11. April 2015)

Wie das mit dem endlosen Zählen funktioniert, habe ich in meinem ersten Posting erklärt. Du musst den Code von dort nehmen und nur die target-Option austauschen.


----------



## SpecialFighter (11. April 2015)

okay verstehe, habe jetzt den code etwas angepasst, mit Hilfe von target
mein countdown soll ja folgendes machen:

1. Der User besucht die Seite
2. Der PHP Code setzt einen aktuellen timestamp+10 sek in die DB, sollte dieser älter als der jetzige timestamp sein.
3. Von vom Datenbank TimeStamp - den jetzigen timestamp, soll der Counter die Differenz runter rechnen
4. Bei 0 sek, wird mit Hilfe von load eine php Datei geladen, welche in der DB wieder einen TimeStamp + 10 sek setzt
5. Der Counter beginnt von vorn.
(Immer unter dem Aspekt: Der Counter darf sich durch das neuladen der Seite nicht unterbrechen lassen)

Kann das so funktioniere oder habe ich einen Denkfehler?:


```
// Energy Timer
$sql = 'SELECT `energy_time` FROM `user` WHERE `ID` = "'.$_SESSION['user_id'].'"';
$ergebnis = $db->query( $sql );
                                  
if ($ergebnis->num_rows != 0)
    {
        while ($zeile = $ergebnis->fetch_object())
            {
                if ($zeile->energy_time - time() <= 0 ) // Anzahl in Sekunden                            
                    {
                        $punkte_abwesenheit = 0;                      
                        $new_timestamp = time()+10;
                        $update = 'UPDATE  `user` SET `energy_time` = "'.$new_timestamp.'", `energy` = `energy`+"'.$punkte_abwesenheit.'" WHERE `ID` = "'.$_SESSION['user_id'].'"';
                        $result = $db->query( $update );
                        $energy_time = $new_timestamp;
                    }
                else  
                    {
                        $energy_time = $zeile->energy_time;
                    }



  
                $energy_datum = date("d.m.Y",$energy_time);
                $energy_datum_array = explode(".", $energy_datum);
              
                $energy_uhrzeit = date("H:i:s",$energy_time);
                $energy_uhrzeit_array = explode(":", $energy_uhrzeit);                  

            }
    }
  
<script type="text/javascript">
    var day = <? echo $energy_datum_array[0]; ?>;
    var month = <? echo $energy_datum_array[1]; ?>;
    var year = <? echo $energy_datum_array[2]; ?>;
    var hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var min = <? echo $energy_uhrzeit_array[1]; ?>;
    var sec = <? echo $energy_uhrzeit_array[2]; ?>;

            jQuery(document).ready(function myCountdown() {
                    jQuery('#countdown_dashboard').countDown({
                                targetOffset: {
                                        'day':             day,
                                        'month':     month,
                                        'year':             year,
                                        'hour':         hour,
                                        'min':             min,
                                        'sec':             sec
                                    },
               
                                // onComplete function
                                onComplete: function() {
                                        jQuery( "#live_update" ).load( "update_timestamp.php" );  
                                        myCountdown();
                                    }
                               });
                          });
</script>
```


----------



## Sempervivum (11. April 2015)

Ja, das sollte schon funktionieren. Wenn ich das richtig sehe, ist allerdings dein Zeitstempel eine absolute Zeit und das bedeutet, dass Du wieder die Option targetDate verwenden müsstest. Außerdem vermisse ich bei deinem Code, wie die Variablen mit dem Zeitstempel beim load aktualisiert werden sollen.


----------



## SpecialFighter (11. April 2015)

ja iwie läuft es auch noch nicht ganz rund, habe eine extreme Denkblockade.

http://m.it-neuss.de/test/

bleibt bei 00:01 stehen und hängt


----------



## Sempervivum (11. April 2015)

Es funktioniert aus folgendem Grund nicht: Dein sec=sec+10 im onComplete wird überschrieben, denn wenn anschließend die Funktion myCountdown aufgerufen wird, werden die Anweisung mit dem Vorbesetzungen der Zeit-Variablen erneut durchlaufen. Dann ist jedoch die Zeit, die diese angeben, schon erreicht. Du musst zunächst mal diese Anweisungen aus der Funktion myCountdown heraus nehmen.
Außerdem wird die PHP-Seite für das load (m.it-neuss.de/test/inc/live_update/counter_update_energy.php) nicht gefunden. Über das Aktualisieren der Zeit-Variablen im onComplete musst Du dir wahrscheinlich noch eingehender Gedanken machen. Am besten informierst Du dich über die jQuery-Funktion ajax().


----------



## SpecialFighter (11. April 2015)

könntest du mir mehr weiterhelfen?
ich wüsste im moment nicht wo der fehler liegt und wo ich genau weiter machen soll.
aber die sec = sec + 10  entfernt, aber das Resultat bleibt das selbe

habe auch den pfad für die .load datei angepasst.


----------



## Sempervivum (11. April 2015)

Probiere es so:

```
<script type="text/javascript">
jQuery(document).ready(function() {
    var day = <? echo $energy_datum_array[0]; ?>;
    var month = <? echo $energy_datum_array[1]; ?>;
    var year = <? echo $energy_datum_array[2]; ?>;
    var hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var min = <? echo $energy_uhrzeit_array[1]; ?>;
    var sec = <? echo $energy_uhrzeit_array[2]; ?>;
    function myCountdown() {
        jQuery('#countdown_dashboard').countDown({
                 targetDate: {
                     'day':        day,
                     'month':    month,
                     'year':        year,
                     'hour':      hour,
                     'min':        min,
                     'sec':        sec
                   },
          
                   // onComplete function
                   onComplete: function() {
                       sec = sec +10;
                       jQuery( "#live_update" ).load( "counter_update_energy.php"  );  
                       myCountdown();
                    }
                 });
    }
    myCountdown();
  });
</script>
```


----------



## SpecialFighter (11. April 2015)

habe ich gemacht.
sieht bis jetzt gut aus, auch wenn ich die Seite manuell lade läuft der Timer an dieser Stelle weiter.

könntest du mir kurz grob erklären wie das script jetzt funktioniert?


----------



## Sempervivum (11. April 2015)

Na, das ist doch schon mal ein Erfolg. Das verbleibende Problem erfordert schon eine fortgeschrittene Technik, indem Du den Zeitpunkt, z. B. in einem Cookie, speicherst. Informiere dich über Cookies, am besten zusammen mit einem Plugin, das die Handhabung erleichtert:
https://github.com/js-cookie/js-cookie
(Anleitung im README.md)


----------



## SpecialFighter (11. April 2015)

klappt alles super,

ich danke dir vielmals


----------



## SpecialFighter (12. April 2015)

allerdings ist mir jetzt ein Fehler aufgefallen,

wenn ich diesen Counter in 2 Browsern manuell aufhaben, einen lasse ich einfach so laufen, bei dem anderen drücke ich ab und zu mal neu laden der seite und dann kommt der counter ins schwitzen, er ruft dann sehr oft ganz schnell hintereinander die .load funktion auf, welche mir in der DB einen Wert um +1 erhöht.

ne idee woran das liegen kann?


----------



## Sempervivum (12. April 2015)

Ist deine Testseite unter dem Link oben aktuell? D. h. kann man es damit testen?
Edit: Bau mal eine Log-Ausgabe für das onComplete ein:

```
onComplete: function() {
                       console.log("onComplete triggered");
                       sec = sec +10;
                       jQuery( "#live_update" ).load( "counter_update_energy.php"  );  
                       myCountdown();
                    }
```


----------



## SpecialFighter (12. April 2015)

also die Testseite ist jetzt aktualisiert: http://m.it-neuss.de/test/


----------



## Sempervivum (13. April 2015)

Da kann ich aber von Cookies nichts erkennen ;-) und der Timer startet auch beim Neuladen von vorn.

Zunächst mal: Beim Aufruf der update-Seite kommt eine Fehlermeldung in der Konsole:
NetworkError: 500 Internal Server Error
Das solltest Du beheben.

Dann habe ich versucht, das Problem, das Du beschreibst, zu reproduzieren: Ich benutze Firefox; diesen zwei Mal gestartet und im zweiten Fenster ein paar Mal Reload gedrückt. Dabei ist das Verhalten wie zu erwarten: Beim Reload passiert gar nichts, der Timer startet von vorn. Nur beim Ablauf des Timers kommt die programmierte Meldung und die Fehlermeldung, die anzeigt, dass die update-Seite aufgerufen wird.
D. h. ich konnte das Problem nicht reproduzieren.


----------



## SpecialFighter (14. April 2015)

sry, mein Fehler - jetzt bitte noch Mal testen: http://m.it-neuss.de/test/
Warum Cookies?
Ich lasse den TimeStamp in ne DB speichern anstatt in nen Cookie - spricht etwas dagegen?


----------



## Sempervivum (14. April 2015)

Nein, gegen das Speichern in der DB spricht überhaupt nichts, wenn dir das geläufiger ist.
Wg. des Fehlverhaltens sehe ich es mir später noch an.


----------



## SpecialFighter (14. April 2015)

dann ist gut 
ja gefällt mir besser als Cookies.
Noch Mal vielen Dank für deine Bemühungen


----------



## Sempervivum (14. April 2015)

Wollte es mir jetzt noch einmal ansehen, aber jetzt kommt folgender Fehler in der Konsole:
NetworkError: 404 Not Found - http://m.it-neuss.de/test/inc/live_update/counter_update_energy.php
Liegt die PHP-Datei nicht unter diesem Pfad?

Edit: ... und der Counter beginnt jetzt wieder von vorn, wenn man neu lädt.


----------



## SpecialFighter (15. April 2015)

irgendwann klappts ^^
bitte jetzt noch mal testen - hatte noch eine falsche Pfadangabe


----------



## SpecialFighter (17. April 2015)

keine Antwort mehr ?


----------



## Sempervivum (17. April 2015)

Hatte leider noch keine Zeit, es mir anzusehen. War immer mit anderen Dingen beschäftigt. Vielleicht heute Abend.


----------



## SpecialFighter (17. April 2015)

ich bin enttäuscht !!
nein, kein Porblem 

Freue mich ja riesig das mir überhaupt jemand hilft.


----------



## Sempervivum (17. April 2015)

So, ich habe es mir mal angesehen. Wie beim letzten Mal: Firefox zwei Mal geöffnet und im zweiten Fenster einige Male neu geladen. Was mir aufgefallen ist: Dabei fängt der Counter nicht mehr beim letzten Wert an. Ein generelles Problem, wenn Du den Wert in der Datenbank speicherst ist, dass Du dies für jeden Besucher und für jede Browserinstanz getrennt tun musst. Hast Du das berücksichtigt? Ein Problem, das Du nicht hast, wenn Du den Wert lokal mit Javascript und Cookie oder Local Storage speicherst.


----------



## SpecialFighter (18. April 2015)

verstehe allerdings nicht, was für einen Unterschied das macht, ob er sich die Zeit aus der DB oder aus einem Cookie holt.
Kannst du mir das erklären?


----------



## Sempervivum (18. April 2015)

Habe ich doch erklärt: Auf der Seite können ja gleichzeitig mehrere Besucher sein, so wie es der Fall ist, wenn Du die Seite zweimal in zwei Browsern geöffnet hast. Dann müsstest Du den Zählerstand doppelt in der DB ablegen, für jeden Besucher getrennt. Wüsste gar nicht, wie man die Besucher identifizieren kann, mit der IP? (Bei mir ist es umgekehrt, ich bin mit Javascript besser vertraut). Macht man es dagegen mit Local Storage, wird der Zählerstand lokal auf dem Computer des Besuchers gespeichert und man hat das Problem nicht.


----------



## SpecialFighter (18. April 2015)

Moment!
Du hast ja nur ein Testbeispielt:

Im Endeffekt loggt man sich erst Mal ein.
Jeder User hat eine ID und dementsprechende einen zugewiesenen TimeStamp.
Wenn ich also im Firefox und Safari als User 1 eingeloggt bin, habe ich somit in beiden Browsern den selben TimeStamp.


----------



## sheel (18. April 2015)

Dann passt ja alles. Wie Sempervivum geschrieben hat, ist das automatische Identifizieren
bzw. das Auseinanderhalten verschiedener User das Hauptproblem. Mit Login ist  man dann
ja schon eindeutig identifiziert.


----------



## SpecialFighter (18. April 2015)

löst aber leider nicht mein Problem: https://www.tutorials.de/threads/endlosschleife-countdown.401213/#post-2070728


----------



## Sempervivum (18. April 2015)

Dann poste doch mal die URL der richtigen Seite mit dem Login und Zugangsdaten für zwei Benutzer (können ja Text-Accounts sein). Allerdings sieht man dann nur das HTML und das JS und nicht das PHP.


----------



## Sempervivum (18. April 2015)

> Wenn ich also im Firefox und Safari als User 1 eingeloggt bin, habe ich somit in beiden Browsern den selben TimeStamp.


Das ist doch eigentlich genau das, was nicht sein darf, sondern man muss sich jeweils mit einem anderen Account einloggen, damit der Zählerstand *getrennt* gespeichert wird?


----------



## SpecialFighter (18. April 2015)

warum getrennt?
Ich habe einen User mit der ID 1 - welcher auch nur einen TimeStamp hat.
Melde ich mich jetzt im FF und im Safari als User 1 an, so arbeiten beide doch nur mit dem TimeStamp von User 1 - somit dürfte es doch keine Probleme geben.

Meinen PHP Teil habe ich dir doch schon gan zam Anfang geschrieben:
https://www.tutorials.de/threads/endlosschleife-countdown.401213/#post-2070715

Und ist der PHP Teil counter_upadate_energy.php welche beim Ablauf des Counters ausgeführt wird:

```
<?php


include ('config.php'); //Her wird nur die DB Verbindung hergestellt


                   
$new_timestamp = time()+10;
$update = 'UPDATE `user` SET `energy_time` = "'.$new_timestamp.'", `energy` = `energy`+"1" WHERE `ID` = "1"';
$result = $db->query( $update );           

mysqli_close($db);

?>
```


----------



## Sempervivum (19. April 2015)

Ich kann dir jetzt nicht mehr ganz folgen, wahrscheinlich weil ich nicht verstehe, was der Sinn und das Ziel bei der ganzen Sache ist. Tatsache ist, dass die beiden beiden Zähler mit unterschiedlichen Zählerständen laufen. Ist dies das was Du willst oder sollen die Zähler synchron laufen?


----------



## SpecialFighter (19. April 2015)

die Zählen sollen synchron laufen


----------



## Sempervivum (19. April 2015)

Ahja. Dann kommen wir aber mit dieser Testseite nicht weiter sondern brauchen die richtige Seite mit Login.


----------



## SpecialFighter (19. April 2015)

wieso??
versteht mich bitte nicht falsch, ich kann euch die richtige Seite nicht zeigen (noch nicht ^^)

aber auf der richtigen Seite ist der selbe Code eingebunden, wie auf der Testseite - es gibt keinen Unterschied


----------



## SpiceLab (19. April 2015)

SpecialFighter hat gesagt.:


> aber auf der richtigen Seite ist der selbe Code eingebunden, wie auf der Testseite - es gibt keinen Unterschied


Den gibt es sehr wohl (für uns): kein Login-Formular, um als User angemeldet/identifiziert zu sein!


----------



## SpecialFighter (19. April 2015)

brauch ihr nicht.
jedesmal wenn ihr die Seite aufruft, bekommt ihr immer den timestamp von user id 1:

$sql = 'SELECT `energy_time` FROM `user` WHERE `ID` = "1"';
somit seit ihr theoretisch als user 1 eingeloggt


----------



## SpiceLab (19. April 2015)

SpecialFighter hat gesagt.:


> brauch ihr nicht.
> jedesmal wenn ihr die Seite aufruft, bekommt ihr immer den timestamp von user id 1:
> 
> $sql = 'SELECT `energy_time` FROM `user` WHERE `ID` = "1"';
> somit seit ihr theoretisch als user 1 eingeloggt


Wenn jeder (unangemeldete) Besucher automatisch als "User 1" eingeloggt wird, darfst du dich auch nicht über dein provoziertes Fehlverhalten wundern:


SpecialFighter hat gesagt.:


> allerdings ist mir jetzt ein Fehler aufgefallen,
> 
> wenn ich diesen Counter in 2 Browsern manuell aufhaben, einen lasse ich einfach so laufen, bei dem anderen drücke ich ab und zu mal neu laden der seite und dann kommt der counter ins schwitzen, er ruft dann sehr oft ganz schnell hintereinander die .load funktion auf, welche mir in der DB einen Wert um +1 erhöht.
> 
> ne idee woran das liegen kann?


Sorry, aber das Thema hat sich augenscheinlich wg. deiner Beratungsresistenz zu einer Endlosschleife entwickelt!


----------



## SpecialFighter (19. April 2015)

@SpiceLab
das hat nichts mit einer Beratungsresistenz zu tun.
Nur ich versuche es zu verstehen, allerdings ergibt sich für mich im moment da keinen Sinn.
Entweder hab ich oder ihr ein Denkfehler ^^

Ich habe jetzt erst Mal nur einen Testseite.
Später soll jeder user einen eigenen timestamp (welcher 5 min in der Zukunft liegt) in der Datenbank stehen haben und der Counter soll die Differenz zwischen dem Datenbank Timestamp und dem jetzigen TimeStamp herunterzählen.



Mir ist allesdings aufgefallen, wenn man jetzt theoretisch 2x in verschiedenen Browsern sich als User 1 anmeldet, es trotzdem zu Zeitdifferenzen bei den countern kommt und das darf ja nicht sein.

Und nichts anderes habe ich mit meiner Testseite jetzt simuliert.
Diese könnt ihr aufrufen und das php script holt euch jeweils nur den timestamp von User 1 - andere User spielen dabei aktuell keine Rolle.

Somit greift ihr immer auf den selben TimeStamp zu - also darf doch keine Differenz bei den Counter im Firefox und Safari (können auch andere Browser sein) auftreten.


----------



## SpiceLab (19. April 2015)

SpecialFighter hat gesagt.:


> Entweder hab ich oder ihr ein Denkfehler ^^


Drei User (Sempervivum, sheel & ich) sollen denselben Denkfehler begehen? Gewagte Theorie 


SpecialFighter hat gesagt.:


> Mir ist allesdings aufgefallen, wenn man jetzt theoretisch 2x in verschiedenen Browsern sich als User 1 anmeldet, es trotzdem zu Zeitdifferenzen bei den countern kommt und das darf ja nicht sein.


Zur Erinnerung dieser Dialog (Post #30 - #32):


Sempervivum hat gesagt.:


> Habe ich doch erklärt: Auf der Seite können ja gleichzeitig mehrere Besucher sein, so wie es der Fall ist, wenn Du die Seite zweimal in zwei Browsern geöffnet hast. Dann müsstest Du den Zählerstand doppelt in der DB ablegen, für jeden Besucher getrennt.





SpecialFighter hat gesagt.:


> Moment!
> Du hast ja nur ein Testbeispielt:
> 
> Im Endeffekt loggt man sich erst Mal ein.
> ...





sheel hat gesagt.:


> Dann passt ja alles. Wie Sempervivum geschrieben hat, ist das automatische Identifizieren
> bzw. das Auseinanderhalten verschiedener User das Hauptproblem. Mit Login ist  man dann
> ja schon eindeutig identifiziert.


----------



## SpecialFighter (19. April 2015)

sry leute, aber ich kann dir / euch nicht folgen, da ich dies komplett anders sehe.



> Habe ich doch erklärt: Auf der Seite können ja gleichzeitig mehrere Besucher sein, so wie es der Fall ist, wenn Du die Seite zweimal in zwei Browsern geöffnet hast. Dann müsstest Du den Zählerstand doppelt in der DB ablegen, für jeden Besucher getrennt.



Das kann ich schon nicht nachvollziehen.
Es gibt keinen Zählerstand in der Datenbank.

ist gibt nur einen timestamp welcher 5 min in der Zukunft liegt.
Jedes mal, wenn die Seite neu aufgerufen wird, lasse ich diese timestamp auslesen und geben diesen an den Counter weiter und dieser
 zählt von diesem wert herunter...


was müsste ich machen, damit wir auf einen gemeinsamen Nenner kommen?


----------



## Sempervivum (19. April 2015)

> was müsste ich machen, damit wir auf einen gemeinsamen Nenner kommen?


Den Zusammenhang erklären, damit man eine Vorstellung davon bekommt, was Du da eigentlich vor hast. Das ist mir nämlich völlig unklar: Sollen die Zähler synchron laufen (wenn man die Testseite mehrfach aufruft, tun sie es nicht). Wie willst Du erreichen, dass der Zähler beim Neuladen mit dem alten Stand weiter macht?


----------



## Parantatatam (19. April 2015)

Das Problem ist doch sehr trivial: es gibt einen Zeitstempel, der in der Datenbank steht. Dieser wird jedes Mal für den entsprechenden Nutzer von dort geladen. Den Zählerstand ermittelt man dann aus dem aktuellen Zeitstempel und dem Zeitstempel aus der Datenbank. Ergo ist die Differenz das, was gewünscht ist. Somit fängt der Zähler beim Neuladen genau dort auf, wo er sein müsste – unabhängig davon, wie häufig oder wann er geladen wurde oder in wie vielen Browsern er gleichzeitig läuft.


----------



## SpecialFighter (19. April 2015)

> unabhängig davon, wie häufig oder wann er geladen wurde oder in wie vielen Browsern er gleichzeitig läuft.



Leider läuft er in mehreren Browsern für einen Benutzer leider unterschiedlich - und das darf nicht sein ...


----------



## Parantatatam (19. April 2015)

Es kommt halt darauf an, von wo Du den aktuellen Zeitstempel nimmst. Theoretisch sollte nicht ausschließlich an der Systemzeit des Nutzers hängen, sondern an einer synchronisierten Zeit, aber so genau kann man das auch nicht sagen. Außerdem muss man auch noch die Zeitzonen beachten, die da reinspielen könnten. Am besten wäre es natürlich, alles auf GMT zu setzen.. oder eben einen anderen Standard.


----------



## SpecialFighter (19. April 2015)

das wäre ja ggf. Schritt 2.

Aber wenn ich selber 2x den Counter in unterschiedlichen Browsern auf haben, ist auch in dem Fall die Systemzeit gleich ...
trozdem tritt eine Differenz auf


----------



## Parantatatam (19. April 2015)

Wie groß ist denn die Differenz, die entsteht?


----------



## SpecialFighter (20. April 2015)

nicht wirklich groß, vielleicht eine 1 sek.


----------



## Parantatatam (20. April 2015)

Damit bestätigst Du das Problem, was ich gesehen habe: der Countdown wird intern sicherlich mit setInterval gelöst und zu einem beliebigen Zeitpunkt innerhalb einer Sekunde gestartet. Und genau diese Varianz sorgt dafür, dass es so versetzt wirkt. Ich wüsste aber auch nicht sicher, wie man das gut lösen kann. Vielleicht geht es darüber, dass man einen Timeout setzt, der dann ziemlich genau den Interval startet.

Nachtrag: es gibt zwei Sachen, die mir jetzt eingefallen sind, mit denen man das Ganze genauer machen kann:

http://www.sitepoint.com/creating-accurate-timers-in-javascript/

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame


----------



## SpecialFighter (24. April 2015)

ohh, habe nicht bekomme das es einen Nachtrag gab - vielen Dank => schau ich mir Mal in ruhe an.
Bin aber aktuell auf ein weiteres Problem gestoßen,

wollte jetzt 3 counter mit unterschiedlicher Zeit gleichzeitig laufen lassen.
klappt auch super, allerdings nur bedingt...

Wenn Counter 1 bei 00:00 angekommen ist, laufen Counter 2 + 3 nicht mehr
Wenn Counter 2 bei 00:00 angekommen ist, läuft Counter 3 nicht mehr.

Baue ich gerade Mal ne Testseite.
Vllt schon ne Idee woran es liegen kann?


----------



## SpecialFighter (24. April 2015)

okay, kann es leider mit einer Testseite nicht reproduzieren

das ist aber mein Script:



```
<script type="text/javascript">
jQuery(document).ready(function() {
    var energy_day = <? echo $energy_datum_array[0]; ?>;
    var energy_month = <? echo $energy_datum_array[1]; ?>;
    var energy_year = <? echo $energy_datum_array[2]; ?>;
    var energy_hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var energy_min = <? echo $energy_uhrzeit_array[1]; ?>;
    var energy_sec = <? echo $energy_uhrzeit_array[2]; ?>;
   
    function EnergyCountdown() {
        jQuery('#EnergyCountdownDashboard').countDown({
                 targetDate: {
                     'day':            energy_day,
                     'month':    energy_month,
                     'year':        energy_year,
                     'hour':          energy_hour,
                     'min':            energy_min,
                     'sec':            energy_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['energy'] <= $_SESSION['energy_max'])
                              { ?>
                                  energy_sec = energy_sec + 300;
                                  jQuery( "#live_update" ).load( "inc/live_update/counter_update_energy.php"  ); 
                                  EnergyCountdown();
                        <?} ?>

                    }
                 });
    }
    EnergyCountdown();
  });
   
   
jQuery(document).ready(function() {
    var stamina_day = <? echo $stamina_datum_array[0]; ?>;
    var stamina_month = <? echo $stamina_datum_array[1]; ?>;
    var stamina_year = <? echo $stamina_datum_array[2]; ?>;
    var stamina_hour = <? echo $stamina_uhrzeit_array[0]; ?>;
    var stamina_min = <? echo $stamina_uhrzeit_array[1]; ?>;
    var stamina_sec = <? echo $stamina_uhrzeit_array[2]; ?>;
   
    function StaminaCountdown() {
        jQuery('#StaminaCountdownDashboard').countDown({
                 targetDate: {
                     'day':            stamina_day,
                     'month':    stamina_month,
                     'year':        stamina_year,
                     'hour':          stamina_hour,
                     'min':            stamina_min,
                     'sec':            stamina_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['stamina'] <= $_SESSION['stamina_max'])
                              { ?>
                                  stamina_sec = stamina_sec + 300;
                                  jQuery( "#live_update" ).load( "inc/live_update/counter_update_stamina.php"  ); 
                                  StaminaCountdown();
                        <?} ?>

                    }
                 });
    }
    StaminaCountdown();
  });
 

jQuery(document).ready(function() {
    var health_day = <? echo $health_datum_array[0]; ?>;
    var health_month = <? echo $health_datum_array[1]; ?>;
    var health_year = <? echo $health_datum_array[2]; ?>;
    var health_hour = <? echo $health_uhrzeit_array[0]; ?>;
    var health_min = <? echo $health_uhrzeit_array[1]; ?>;
    var health_sec = <? echo $health_uhrzeit_array[2]; ?>;
   
    function HealthCountdown() {
        jQuery('#HealthCountdownDashboard').countDown({
                 targetDate: {
                     'day':            health_day,
                     'month':    health_month,
                     'year':        health_year,
                     'hour':          health_hour,
                     'min':            health_min,
                     'sec':            health_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['health'] <= $_SESSION['health_max'])
                              { ?>
                                  health_sec = health_sec + 300;
                                  jQuery( "#live_update" ).load( "inc/live_update/counter_update_health.php"  ); 
                                  HealthCountdown();
                        <?} ?>

                    }
                 });
    }
    HealthCountdown();
  }); 
</script>
```


----------



## SpecialFighter (30. April 2015)

So, möchte das Thema gerne neu aufgreifen, da ich immer noch keine Lösung gefunden habe.
Mittlerweile gibts auch eine Testseite: http://m.it-neuss.de/test/

- lasst den ersten Countdown runterzählen, so das der erste Wert 100/100 erreicht
- danach ladet die Seite neu, und Ihr werdet sehen, dass die anderen Counter nicht mehr weiter machen
(über den Reset Button könnt Ihr die Werte zurücksetzen um das Szenario zu wiederholen)


Ich verstehe einfach nich warum - hoffe ihr könnt mir helfen - ich verzweifel daran.
hier mein ganzes Script:

Mein PHP File:

```
<?php

$timestamp = time();

// Energy Timer
$sql = 'SELECT `energy`, `energy_max`, `energy_time` FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        if ($timestamp - $zeile->energy_time >= 0 ) // Anzahl in Sekunden
            {
            $punkte_abwesenheit = 0;
            $new_timestamp = time()+10;
            $update = 'UPDATE  `user` SET `energy_time` = "'.$new_timestamp.'", `energy` = `energy`+"'.$punkte_abwesenheit.'" WHERE `ID` = "2"';
            $result = $db->query( $update );
            $energy_time = $new_timestamp;
        }
        else
        {
            $energy_time = $zeile->energy_time;
        }


        $energy_datum = date("d.m.Y",$energy_time);
        $energy_datum_array = explode(".", $energy_datum);

        $energy_uhrzeit = date("H:i:s",$energy_time);
        $energy_uhrzeit_array = explode(":", $energy_uhrzeit);

    }
}


// Stamina Timer
$sql = 'SELECT `stamina`, `stamina_max`, `stamina_time` FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        if ($timestamp - $zeile->stamina_time >= 0 ) // Anzahl in Sekunden
            {
            $punkte_abwesenheit = 0;
            $new_timestamp = time()+15;
            $update = 'UPDATE  `user` SET `stamina_time` = "'.$new_timestamp.'", `stamina` = `stamina`+"'.$punkte_abwesenheit.'" WHERE `ID` = "2"';
            $result = $db->query( $update );
            $stamina_time = $new_timestamp;
        }
        else
        {
            $stamina_time = $zeile->stamina_time;
        }


        $stamina_datum = date("d.m.Y",$stamina_time);
        $stamina_datum_array = explode(".", $stamina_datum);

        $stamina_uhrzeit = date("H:i:s",$stamina_time);
        $stamina_uhrzeit_array = explode(":", $stamina_uhrzeit);

    }
}



// Health Timer
$sql = 'SELECT `health`, `health_max`, `health_time` FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        if ($timestamp - $zeile->health_time >= 0 ) // Anzahl in Sekunden
            {
            $punkte_abwesenheit = 0;
            $new_timestamp = time()+20;
            $update = 'UPDATE  `user` SET `health_time` = "'.$new_timestamp.'", `health` = `health`+"'.$punkte_abwesenheit.'" WHERE `ID` = "2"';
            $result = $db->query( $update );
            $health_time = $new_timestamp;
        }
        else
        {
            $health_time = $zeile->health_time;
        }


        $health_datum = date("d.m.Y",$health_time);
        $health_datum_array = explode(".", $health_datum);

        $health_uhrzeit = date("H:i:s",$health_time);
        $health_uhrzeit_array = explode(":", $health_uhrzeit);


    }
}



// Dashboard Werte
$sql = 'SELECT * FROM `user` WHERE `ID` = "2"';
$ergebnis = $db->query( $sql );

if ($ergebnis->num_rows != 0)
{
    while ($zeile = $ergebnis->fetch_object())
    {
        $_SESSION['energy']          =  $zeile->energy;
        $_SESSION['energy_max']       =  $zeile->energy_max;
        $_SESSION['stamina']          =   $zeile->stamina;
        $_SESSION['stamina_max']      =   $zeile->stamina_max;
        $_SESSION['health']          =  $zeile->health;
        $_SESSION['health_max']       =  $zeile->health_max;
    }
}
```


Hier mein HTML File:

```
<?php
header('Content-Type: text/html; charset=utf-8');
ini_set('session.use_cookies',1);
ini_set('session.use_only_cookies',1);
ini_set('session.use_trans_sid',0);
session_start();

error_reporting(-1);
ini_set('display_errors', false);  /* Alle Fehlermeldungen anziegen lassen. Im "Echtbetrieb" auf "false" setzen! */


include('inc/config.php');
include('inc/functions.php');

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">

    <title></title>
</head>

<body>
    <div id="live_update"></div>

    <div class="row">
        <div class="title_wrapper">
            <div style="float: left; margin-right: 30px;">
                <h4 style="color: #fff; margin-bottom: 0px !important;">( <a id="energy_header"><? echo  $_SESSION['energy']; ?>
                </a> / <a id="energy_max_header"><? echo  $_SESSION['energy_max']; ?>
                </a> )</h4><? if ($_SESSION['energy'] < $_SESSION['energy_max'])
                                                            { ?>

                <div id="EnergyCountdownDashboard">
                    <div style="float: left;color: #fff; margin-right:3px;">
                        +
                    </div>

                    <div class="dash minutes_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>

                    <div style="float: left;color: #fff;">
                        :
                    </div>

                    <div class="dash seconds_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>
                </div><? } ?>
                </div>

            <div style="float: left; margin-right: 30px;">
                <h4 style="color: #fff; margin-bottom: 0px !important;">( <a id="stamina_header"><? echo  $_SESSION['stamina']; ?>
                </a> / <a id="stamina_max_header"><? echo  $_SESSION['stamina_max']; ?>
                </a> )</h4><? if ($_SESSION['stamina'] < $_SESSION['stamina_max'])
                                                            { ?>

                <div id="StaminaCountdownDashboard">
                    <div style="float: left;color: #fff; margin-right:3px;">
                        +
                    </div>

                    <div class="dash minutes_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>

                    <div style="float: left;color: #fff;">
                        :
                    </div>

                    <div class="dash seconds_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>
                </div><? } ?>
                </div>

            <div style="float: left; margin-right: 30px;">
                <h4 style="color: #fff; margin-bottom: 0px !important;">( <a id="health_header"><? echo  $_SESSION['health']; ?>
                </a> / <a id="health_max_header"><? echo  $_SESSION['health_max']; ?>
                </a> )</h4><? if ($_SESSION['health'] < $_SESSION['health_max'])
                                                            { ?>

                <div id="HealthCountdownDashboard">
                    <div style="float: left;color: #fff; margin-right:3px;">
                        +
                    </div>

                    <div class="dash minutes_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>

                    <div style="float: left;color: #fff;">
                        :
                    </div>

                    <div class="dash seconds_dash">
                        <div class="digit">
                            0
                        </div>

                        <div class="digit">
                            0
                        </div>
                    </div>
                </div><? } ?>
                </div>
        </div>
    </div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    var energy_day = <? echo $energy_datum_array[0]; ?>;
    var energy_month = <? echo $energy_datum_array[1]; ?>;
    var energy_year = <? echo $energy_datum_array[2]; ?>;
    var energy_hour = <? echo $energy_uhrzeit_array[0]; ?>;
    var energy_min = <? echo $energy_uhrzeit_array[1]; ?>;
    var energy_sec = <? echo $energy_uhrzeit_array[2]; ?>;

    function EnergyCountdown() {
        jQuery('#EnergyCountdownDashboard').countDown({
                 targetDate: {
                     'day':         energy_day,
                     'month':    energy_month,
                     'year':        energy_year,
                     'hour':        energy_hour,
                     'min':         energy_min,
                     'sec':         energy_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['energy'] <= $_SESSION['energy_max'])
                            { ?>
                                energy_sec = energy_sec + 10;
                                jQuery( "#live_update" ).load( "inc/live_update/counter_update_energy.php"  ); 
                                EnergyCountdown();
                        <?} ?>

                    }
                 });
    }
    EnergyCountdown();
    });


    jQuery(document).ready(function() {
    var stamina_day = <? echo $stamina_datum_array[0]; ?>;
    var stamina_month = <? echo $stamina_datum_array[1]; ?>;
    var stamina_year = <? echo $stamina_datum_array[2]; ?>;
    var stamina_hour = <? echo $stamina_uhrzeit_array[0]; ?>;
    var stamina_min = <? echo $stamina_uhrzeit_array[1]; ?>;
    var stamina_sec = <? echo $stamina_uhrzeit_array[2]; ?>;

    function StaminaCountdown() {
        jQuery('#StaminaCountdownDashboard').countDown({
                 targetDate: {
                     'day':         stamina_day,
                     'month':    stamina_month,
                     'year':        stamina_year,
                     'hour':        stamina_hour,
                     'min':         stamina_min,
                     'sec':         stamina_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['stamina'] <= $_SESSION['stamina_max'])
                            { ?>
                                stamina_sec = stamina_sec + 15;
                                jQuery( "#live_update" ).load( "inc/live_update/counter_update_stamina.php"  ); 
                                StaminaCountdown();
                        <?} ?>

                    }
                 });
    }
    StaminaCountdown();
    });


    jQuery(document).ready(function() {
    var health_day = <? echo $health_datum_array[0]; ?>;
    var health_month = <? echo $health_datum_array[1]; ?>;
    var health_year = <? echo $health_datum_array[2]; ?>;
    var health_hour = <? echo $health_uhrzeit_array[0]; ?>;
    var health_min = <? echo $health_uhrzeit_array[1]; ?>;
    var health_sec = <? echo $health_uhrzeit_array[2]; ?>;

    function HealthCountdown() {
        jQuery('#HealthCountdownDashboard').countDown({
                 targetDate: {
                     'day':         health_day,
                     'month':    health_month,
                     'year':        health_year,
                     'hour':        health_hour,
                     'min':         health_min,
                     'sec':         health_sec
                   },
        
                   // onComplete function
                   onComplete: function() {
                      <?
                          if ($_SESSION['health'] <= $_SESSION['health_max'])
                            { ?>
                                health_sec = health_sec + 20;
                                jQuery( "#live_update" ).load( "inc/live_update/counter_update_health.php"  ); 
                                HealthCountdown();
                        <?} ?>

                    }
                 });
    }
    HealthCountdown();
    }); 
    </script>
</body>
</html>
```


----------



## Sempervivum (30. April 2015)

Hast Du mal einen Blick in die Konsole geworfen?:

TypeError: document.getElementById(...) is null
...innerHTML = parseInt(document.getElementById("stamina_dashboard").innerHTML) + 1

Im HTML gibt es kein Element mit der ID "stamina_dashboard".



> danach ladet die Seite neu, und Ihr werdet sehen, dass die anderen Counter nicht mehr weiter machen


Kann ich nicht nachvollziehen. Hast Du den Fehler inzwischen behoben?


----------



## SpecialFighter (1. Mai 2015)

ahh, die Fehlermeldung kannst du ignorieren, das ist noch eine tote Codezeile, welche ich soeben gelöscht habe ^^
aber hier noch Mal ein Video zu meinem Fehler: http://m.it-neuss.de/test/test.mov


----------



## SpecialFighter (4. Mai 2015)

kann dies niemand reproduzieren bzw. nachvollziehen?
P.S. bitte das Thema als "nicht erledigt" markieren


----------

