Beste manier om een ​​horloge in javascript te doen met server-tijdsynchronisatie

Ik wil graag een JS laten kijken die:

  • Starttijd is servertijd (de server zal dit leveren in de broncode van de pagina).
  • Updates elke seconde.
  • (voorkeur, niet verplicht) Compatibel met de nieuwste versies van gecko, webkit, presto en IE.

Ik heb al vele implementaties hiervan gecontroleerd, maar ik wilde weten welke de meest efficiënte is. Dat wil zeggen: degene die minder middelen van de pc neemt en degene die nauwkeuriger is tussen al degenen die bestaan.

1
Er is niets mis met de simpele setInterval. Ik wilde gewoon de meest efficiënte manier kennen. Ik werd gevraagd om een ​​js-script te maken om precies dat zo efficiënt mogelijk te doen. Ik heb sommige al op sommige websites gecontroleerd met behulp van Google zoals internet.com, maar ik weet nog steeds niet of er bijvoorbeeld een native js-manier is om dat te doen (bijvoorbeeld: het Date-object gebruiken)
toegevoegd de auteur brunoais, de bron
Wil je de vele implementaties delen die je hebt gecontroleerd? Wat is er mis met een eenvoudige setInterval , en als je heel rigoureus wilt zijn, controleer dan om de paar minuten (een tweede interval of een interne teller) hoe lang het is verstreken en synchroniseer.
toegevoegd de auteur davin, de bron
Het is eenvoudig genoeg om efficiënt te zijn. Dat is zo native een oplossing als het wordt.
toegevoegd de auteur davin, de bron

1 antwoord

Een klok die elke seconde tikt, is in feite een animatie, dus je zou kunnen profiteren van recursieve requestAnimationFrame ( met fallback to setTimeout ).

var previousTime = 0;

function update(time) {
    if (time - previousTime >= 1000) {
        redrawClock(time);
        previousTime = time;
    }
    requestAnimationFrame(update);
}

Met setInterval moet u een Date -object maken voor elke iteratie, omdat de eigen vertraging van setInterval langer kan duren dan de formele waarde. Zie het schitterende artikel van John Resig over timers in JavaScript .

requestAnimationFrame on the contrary is:

  1. Efficiënter, geoptimaliseerd voor de taak.
  2. Geeft een nauwkeurig tijdstempel voor het terugbellen.
1
toegevoegd
Mogelijk wilt u previousTime = time in het blok, anders kunt u die klok nooit opnieuw tekenen;)
toegevoegd de auteur Milosz, de bron
@Milosz correct, bedankt! Ik heb het fragment bijgewerkt.
toegevoegd de auteur katspaugh, de bron