Comment puis-je créer des minuteries précises en JavaScript ?

Création de minuteries précises en JavaScript

Déterminer des intervalles de temps précis en JavaScript peut être difficile en raison de la nature imprécise de setTimeout() et setInterval( ).

Inexactitude de setTimeout() et setInterval()

setTimeout() et setInterval() s'appuient sur les mécanismes de planification du navigateur, qui peuvent être influencés par les ressources système et l'activité du navigateur. Cette variabilité inhérente peut conduire à des incohérences et à un timing peu fiable, comme le démontre l'exemple donné.

Solution : Utiliser l'objet Date

Pour créer des minuteries précises, envisagez d'utiliser l'objet Date. La méthode now() de l'objet pour récupérer l'horodatage actuel en millisecondes. Cette approche offre une meilleure précision par rapport aux méthodes basées sur le rappel.

Implémentation simple de la minuterie :

Pour les scénarios de synchronisation de base, vous pouvez suivre explicitement le décalage horaire en utilisant l'approche suivante :

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

Cette méthode suit le décalage horaire depuis le début du chronomètre. Pour éviter les sauts de valeur potentiels, il est recommandé de mettre à jour l'intervalle plus fréquemment (par exemple toutes les 100 ms).

Minuteries auto-ajustables

Pour des intervalles précis et sans dérive, vous pouvez mettre en œuvre des minuteries auto-ajustables. Ces minuteries adaptent le délai pour chaque expiration répétée en fonction du temps réellement écoulé :

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);
function step() {
    var dt = Date.now() - expected; // drift
    ...
    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // adjust delay for drift
}

Cette approche surveille la dérive temporelle et compense toute incohérence, garantissant une cadence de synchronisation plus précise.

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!