JS klokje

[Zenda]

code:

$(document).ready(function () {
        
        var serverTime = 1377873254;
        var localTime = Date.now();
        var timeDiff = serverTime - localTime;
        var blaat = '';
        
        setInterval(function () {
                var blaat = Date.now() + timeDiff;
            console.log(blaat);
        }, 1000);
});

Ik ben bezig met een 'simpel' klokje voor een website (veiling website). Ben echt een JS noob en het wil natuurlijk na 3 uren prutsen niet lukken . Servertime is time() via PHP, localTime is de cliënt side tijd, dan rekent hij het verschil uit tussen de twee en vervolgens telt hij het verschil op bij de client side time alleen dus niet zoals het moet.

Wat ik steeds terug krijg is:

code:

1378027670
1378028673
1378030671
enz.

Eigenlijk moet hij gewoon doen:

code:

1378027670
1378027671
1378027672

Kan iemand mij op weghelpen? Ik weet niet meer waar ik het moet zoeken.

[418O2]

Uhm. Je berekent het verschil tussen local en servertime en dat tel je bij de localtime op? Zit je dan niet weer gewoon op de servertime? of loopt local voor ? En wat wil je daarmee bereiken ?

[Zenda]

Het oorspronkelijke idee is, om een klokje te hebben op de website:

30-08-2013 14:50:22
-
30-08-2013 14:50:23
-
30-08-2013 14:50:24
etc.

Dit moet dan via server time, want de veilingen werken ook op server time. Ik moet dus het verschil tussen server time en client time uitrekenen om de juiste tijd te weergeven.

Misschien is mijn denkwijze ook wel helemaal verkeerd en kan het heel anders met server time, sta open voor iedere suggestie

[418O2]

Ik zou het met enkel server time doen. Dan poll je die elke seconde.

Of je initieert een datetime met de servertijd en plust die elke seconde met een seconde. Eventueel elke 5/10/20 seconden even updaten met de servertijd van dan.

[!null]

Dat is niet hoe je een klok synchroniseert

Volgens mij kun je beter beginnen met je server time waarde, en deze iedere seconden dan te verhogen met 1 en af te drukken. Dan wellicht iedere minuut of vijf minuten de servertime opnieuw ophalen omdat je zelfgemaakte interval klok middels de browser nooit voor langere tijd goed kan lopen.

Edit: Oh ik was te laat.

Daarnaast is je PHP time() volgens mij in UTC tijd, en wil je GMT tijd. Zie ik ook de eerste comment op de online PHP time() functie pagina.

[ Voor 20% gewijzigd door !null op 30-08-2013 14:58 ]

[ValHallASW]

Zenda schreef op vrijdag 30 augustus 2013 @ 14:41:
1378027670
1378028673
1378030671
enz..

Eigenlijk moet hij gewoon doen:

1378027670
1378027671
1378027672

(emphasis mine)

Je krijgt de tijd in milliseconden, niet in hele seconden! Je klokje doet het dus gewoon (behalve dat 'ie 29 seconden overgeslagen heeft). De laatste 3 digits is wáár je binnen die seconde zit, en dat is altijd ongeveer op hetzelfde punt - je ziet daar de jitter van de functie-call: de ene keer is 'ie een milliseconde eerder of later.

[ Voor 4% gewijzigd door ValHallASW op 30-08-2013 15:03 ]

[Zenda]

Thanks voor jullie reacties. Het is nu gelukt, ik rip dingen van internet en denk verder niet na als het om JS gaat. Maar nu toch maar zelf wat gemaakt:

code:

$(document).ready(function () {
        
        var serverTime = <?php echo $time; ?>;
                
        setInterval(function () {
                serverTime = serverTime + 1;
                var dated = new Date(serverTime * 1000);
                console.log(dated);
                var year = dated.getFullYear();
                var months = dated.getMonth();
                var days = dated.getDay();
                var hours = dated.getHours();
                var minutes = dated.getMinutes();
                var seconds = dated.getSeconds();
                //console.log('timestamp: ' + timess);
            console.log(year + '-' + months + '-' + days + ' ' + (hours <= 9 ? '0' + hours : hours) + ':' + (minutes <= 9 ? '0' + minutes : minutes) + ':' + (seconds <= 9 ? '0' + seconds : seconds));
        }, 1000);
});

Dit geeft de volgende output:

code:

Fri Aug 30 2013 15:03:39 GMT+0200 (Central Europe Daylight Time)
2013-7-5 15:03:39
Fri Aug 30 2013 15:03:40 GMT+0200 (Central Europe Daylight Time)
2013-7-5 15:03:40

Gaat nu dus al een stuk beter! Enige wat ik nu niet begrijp, is waarom hij de maand en de dag niet goed weergeeft?

[ValHallASW]

Zenda schreef op vrijdag 30 augustus 2013 @ 15:06:

code:

                var months = dated.getMonth();
                var days = dated.getDay();

Dit geeft de volgende output:

code:

Fri Aug 30 2013 15:03:40 GMT+0200 (Central Europe Daylight Time)
2013-7-5 15:03:40

Gaat nu dus al een stuk beter! Enige wat ik nu niet begrijp, is waarom hij de maand en de dag niet goed weergeeft?

Gokje: .getMonth() geeft de maand terug, maar 0-indexed, en getDay() geeft de dag in de week terug (5, dus vrijdag).

https://developer.mozilla...bal_Objects/Date/getMonth
https://developer.mozilla...lobal_Objects/Date/getDay

[ Voor 14% gewijzigd door ValHallASW op 30-08-2013 15:09 ]

[Woy]

Zenda schreef op vrijdag 30 augustus 2013 @ 15:06:
Thanks voor jullie reacties. Het is nu gelukt, ik rip dingen van internet en denk verder niet na als het om JS gaat. Maar nu toch maar zelf wat gemaakt:

code:

$(document).ready(function () {
        
        var serverTime = <?php echo $time; ?>;
                
        setInterval(function () {
                serverTime = serverTime + 1;
                var dated = new Date(serverTime * 1000);
                console.log(dated);
                var year = dated.getFullYear();
                var months = dated.getMonth();
                var days = dated.getDay();
                var hours = dated.getHours();
                var minutes = dated.getMinutes();
                var seconds = dated.getSeconds();
                //console.log('timestamp: ' + timess);
            console.log(year + '-' + months + '-' + days + ' ' + (hours <= 9 ? '0' + hours : hours) + ':' + (minutes <= 9 ? '0' + minutes : minutes) + ':' + (seconds <= 9 ? '0' + seconds : seconds));
        }, 1000);
});

Dit lijkt me overigens een stuk minder nauwkeurig dan je eerste opzet waar je een offset berekend. Je gaat er bij deze opzet van uit dat je interval altijd exact op 1 seconde uitgevoerd zal worden, maar dat is allerminst gegarandeerd. Er zal altijd wat afwijking inzitten, en dus zal je klok steeds verder afdriften.

Je opzet met een offset van de servertime is veel betrouwbaarder, want hoewel de de interval dan misschien niet klopt, zal de client-time redelijk constant lopen ( Anders klopt je interval sowieso ook al niet, want die is op dezelfde klok gebaseerd ).

Je moet alleen nog wel rekening houden met de initiële render tijd van je pagina, en de transport tijd en render tijd naar je client toe.

overigens is dit echt een javascript/clientside probleem dus ik verplaats het topic even naar WEB.

[ Voor 3% gewijzigd door Woy op 30-08-2013 15:15 ]

[Zenda]

Goed punt inderdaad, ik wil het alleen nu eerst werkend krijgen zodat ik in ieder geval even iets kan laten zien. Dan ga ik maandag verder met nauwkeurigheid / betrouwbaarheid. Thanks voor jullie reacties, ik ga ermee aan de slag.

[Woy]

Het probleem wat je overigens in je startpost hebt is dat je de time() function van php gebruikt, en die geeft het aantal seconden sinds de epoch, en Date.now() levert het aantal ms sinds de epoch. Dus je rekent met twee verschillende eenheden