Comment puis-je créer des minuteries JavaScript précises qui évitent les dérives ?

Création de minuteries JavaScript précises

Les minuteries jouent un rôle crucial dans JavaScript pour planifier des tâches et implémenter des fonctionnalités en temps réel. Cependant, garantir l'exactitude des minuteries peut être difficile en raison de la nature asynchrone de l'exécution de JavaScript.

Inexactitude de setInterval/setTimeout

L'extrait de code que vous avez fourni utilise la fonction setInterval pour incrémenter un compteur chaque deuxième. Cependant, vous avez observé qu’au bout de 3 600 secondes, le compteur n’atteignait qu’environ 3 500 secondes. En effet, setInterval et setTimeout ne sont pas intrinsèquement précis. Ils sont sujets à des retards et à des dérives dans le temps.

Synchronisation précise avec l'objet Date

Pour créer une minuterie précise, il est recommandé d'utiliser plutôt l'objet Date. L'objet Date vous permet d'obtenir l'heure actuelle avec une précision à la milliseconde. Vous pouvez baser la logique de votre minuterie sur la différence entre l'heure actuelle et une heure de début, comme ceci :

var start = Date.now();
setInterval(function() {
    var delta = Date.now() - start; // milliseconds elapsed since start
    ...
    output(Math.floor(delta / 1000)); // in seconds
}, 1000); // update about every second

Minuteries auto-ajustables

Pour les applications de minuterie qui nécessitent un intervalle constant sans dérive , les minuteries auto-ajustables sont une meilleure option. Ils ajustent dynamiquement le délai entre les délais d'attente en fonction du temps réellement écoulé. Cette approche garantit que le chronomètre reste sur la bonne voie :

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // the drift (positive for overshooting)
    ... // do what is to be done
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // take into account drift
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!