Maison >interface Web >js tutoriel >Comment puis-je créer une minuterie très précise en JavaScript ?

Comment puis-je créer une minuterie très précise en JavaScript ?

DDD
DDDoriginal
2024-12-13 12:33:14421parcourir

How Can I Create a Highly Accurate Timer in JavaScript?

Création d'une minuterie précise en JavaScript

Les minuteries en JavaScript, telles que setInterval et setTimeout, sont pratiques mais manquent de précision. Ils sont sujets à des retards et à des dérives, conduisant à des erreurs de timing sur des périodes prolongées. Pour résoudre ce problème, il est essentiel d'envisager des approches alternatives pour créer une minuterie avec une précision précise.

Inexactitude des minuteries JavaScript

L'incohérence des minuteries comme setInterval provient de leur sous-jacent mise en œuvre. Ces fonctions se rapprochent du délai souhaité à l'aide de rappels du navigateur, qui sont sujets à des irrégularités d'exécution en raison de divers facteurs système. Par conséquent, ils ne peuvent pas garantir un timing précis et peuvent accumuler des erreurs importantes au fil du temps.

Créer une minuterie précise

Pour surmonter cette limitation, une approche plus fiable consiste à utiliser l'objet Date pour obtenir l'heure actuelle avec une précision à la milliseconde. En tirant parti de cette mesure précise du temps, nous pouvons mettre en œuvre une minuterie qui reflète avec précision le temps écoulé :

var start = Date.now(); // Get the current time as a millisecond timestamp.
setInterval(function() {
    var delta = Date.now() - start; // Calculate the time difference since the start.
    ... // Perform your timed operations using 'delta', which represents milliseconds elapsed.
}, 1000); // Set the interval to update every second (1000 milliseconds).

Cette approche fournit une mesure précise du temps écoulé. De plus, vous pouvez affiner la précision de la minuterie en mettant à jour l'horloge plus fréquemment, par exemple toutes les 100 millisecondes, afin de minimiser les sauts de synchronisation potentiels.

Pour les applications qui nécessitent des intervalles de temps cohérents et une dérive minimale, une stratégie de minuterie plus avancée est recommandé :

var interval = 1000; // ms
var expected = Date.now() + interval;
setTimeout(step, interval);

function step() {
    var dt = Date.now() - expected; // Determine the drift between actual and expected execution times.
    if (dt > interval) {
        // Handle significant delays (e.g., tab inactivity or other issues).
    }

    ... // Perform your timed operations.

    expected += interval;
    setTimeout(step, Math.max(0, interval - dt)); // Adjust the next timeout interval based on observed drift.
}

Cette minuterie auto-ajustable compense la dérive et garantit un intervalle cohérent et précis en recalculant le prochain délai d'attente en fonction de l'heure réelle écoulé lors des exécutions précédentes.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn